Скрипт заливки цветом контура svg

Question

Есть SVG файл. Мне нужно заливать каким-то цветом контуры из этого SVG при клике мышкой на контуре. Я подключил библиотеку JQuery 1.7.1., нашел скрипт, который заливает цветом path из SVG. Но работает это только когда SVG находится в теле документа HTML. Подскажите пожалуйста, как мне правильно подключить скрипт, чтобы он мог работать с внешним SVG файлом? Пробовал подгружать SVG через теги img, object, embed, но скрипт не срабатывает. Вот пример моего кода:

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test SVG</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>

</head>
<body>

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="210mm" height="50mm" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 210 50"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
  <style type="text/css">
   <![CDATA[
    .str0 {stroke:black;stroke-width:0.35}
    .fil0 {fill:yellow}
   ]]>
  </style>
 </defs>
 <g id="Layer_one">
  <path class="fil0 str0" d="M4.6 5l28.8 0c0.33,0 0.6,0.27 0.6,0.6l0 10.8c0,0.33 -0.27,0.6 -0.6,0.6l-28.8 0c-0.33,0 -0.6,-0.27 -0.6,-0.6l0 -10.8c0,-0.33 0.27,-0.6 0.6,-0.6z"/>
  <path class="fil0 str0" d="M4.6 19l28.8 0c0.33,0 0.6,0.27 0.6,0.6l0 10.8c0,0.33 -0.27,0.6 -0.6,0.6l-28.8 0c-0.33,0 -0.6,-0.27 -0.6,-0.6l0 -10.8c0,-0.33 0.27,-0.6 0.6,-0.6z"/>
  <path class="fil0 str0" d="M4.6 33l28.8 0c0.33,0 0.6,0.27 0.6,0.6l0 10.8c0,0.33 -0.27,0.6 -0.6,0.6l-28.8 0c-0.33,0 -0.6,-0.27 -0.6,-0.6l0 -10.8c0,-0.33 0.27,-0.6 0.6,-0.6z"/>
  <path class="fil0 str0" d="M36.6 5l28.8 0c0.33,0 0.6,0.27 0.6,0.6l0 10.8c0,0.33 -0.27,0.6 -0.6,0.6l-28.8 0c-0.33,0 -0.6,-0.27 -0.6,-0.6l0 -10.8c0,-0.33 0.27,-0.6 0.6,-0.6z"/>
  <path class="fil0 str0" d="M36.6 19l28.8 0c0.33,0 0.6,0.27 0.6,0.6l0 10.8c0,0.33 -0.27,0.6 -0.6,0.6l-28.8 0c-0.33,0 -0.6,-0.27 -0.6,-0.6l0 -10.8c0,-0.33 0.27,-0.6 0.6,-0.6z"/>
  <path class="fil0 str0" d="M36.6 33l28.8 0c0.33,0 0.6,0.27 0.6,0.6l0 10.8c0,0.33 -0.27,0.6 -0.6,0.6l-28.8 0c-0.33,0 -0.6,-0.27 -0.6,-0.6l0 -10.8c0,-0.33 0.27,-0.6 0.6,-0.6z"/>
 </g>
 <g id="Layer_two">
  <path class="fil0 str0" d="M74.6 5l28.8 0c0.33,0 0.6,0.27 0.6,0.6l0 10.8c0,0.33 -0.27,0.6 -0.6,0.6l-28.8 0c-0.33,0 -0.6,-0.27 -0.6,-0.6l0 -10.8c0,-0.33 0.27,-0.6 0.6,-0.6z"/>
  <path class="fil0 str0" d="M74.6 19l28.8 0c0.33,0 0.6,0.27 0.6,0.6l0 10.8c0,0.33 -0.27,0.6 -0.6,0.6l-28.8 0c-0.33,0 -0.6,-0.27 -0.6,-0.6l0 -10.8c0,-0.33 0.27,-0.6 0.6,-0.6z"/>
  <path class="fil0 str0" d="M74.6 33l28.8 0c0.33,0 0.6,0.27 0.6,0.6l0 10.8c0,0.33 -0.27,0.6 -0.6,0.6l-28.8 0c-0.33,0 -0.6,-0.27 -0.6,-0.6l0 -10.8c0,-0.33 0.27,-0.6 0.6,-0.6z"/>
  <path class="fil0 str0" d="M106.6 5l28.8 0c0.33,0 0.6,0.27 0.6,0.6l0 10.8c0,0.33 -0.27,0.6 -0.6,0.6l-28.8 0c-0.33,0 -0.6,-0.27 -0.6,-0.6l0 -10.8c0,-0.33 0.27,-0.6 0.6,-0.6z"/>
  <path class="fil0 str0" d="M106.6 19l28.8 0c0.33,0 0.6,0.27 0.6,0.6l0 10.8c0,0.33 -0.27,0.6 -0.6,0.6l-28.8 0c-0.33,0 -0.6,-0.27 -0.6,-0.6l0 -10.8c0,-0.33 0.27,-0.6 0.6,-0.6z"/>
  <path class="fil0 str0" d="M106.6 33l28.8 0c0.33,0 0.6,0.27 0.6,0.6l0 10.8c0,0.33 -0.27,0.6 -0.6,0.6l-28.8 0c-0.33,0 -0.6,-0.27 -0.6,-0.6l0 -10.8c0,-0.33 0.27,-0.6 0.6,-0.6z"/>
 </g>
 <g id="Layer_three">
  <path class="fil0 str0" d="M144.6 5l28.8 0c0.33,0 0.6,0.27 0.6,0.6l0 10.8c0,0.33 -0.27,0.6 -0.6,0.6l-28.8 0c-0.33,0 -0.6,-0.27 -0.6,-0.6l0 -10.8c0,-0.33 0.27,-0.6 0.6,-0.6z"/>
  <path class="fil0 str0" d="M144.6 19l28.8 0c0.33,0 0.6,0.27 0.6,0.6l0 10.8c0,0.33 -0.27,0.6 -0.6,0.6l-28.8 0c-0.33,0 -0.6,-0.27 -0.6,-0.6l0 -10.8c0,-0.33 0.27,-0.6 0.6,-0.6z"/>
  <path class="fil0 str0" d="M144.6 33l28.8 0c0.33,0 0.6,0.27 0.6,0.6l0 10.8c0,0.33 -0.27,0.6 -0.6,0.6l-28.8 0c-0.33,0 -0.6,-0.27 -0.6,-0.6l0 -10.8c0,-0.33 0.27,-0.6 0.6,-0.6z"/>
  <path class="fil0 str0" d="M176.6 5l28.8 0c0.33,0 0.6,0.27 0.6,0.6l0 10.8c0,0.33 -0.27,0.6 -0.6,0.6l-28.8 0c-0.33,0 -0.6,-0.27 -0.6,-0.6l0 -10.8c0,-0.33 0.27,-0.6 0.6,-0.6z"/>
  <path class="fil0 str0" d="M176.6 19l28.8 0c0.33,0 0.6,0.27 0.6,0.6l0 10.8c0,0.33 -0.27,0.6 -0.6,0.6l-28.8 0c-0.33,0 -0.6,-0.27 -0.6,-0.6l0 -10.8c0,-0.33 0.27,-0.6 0.6,-0.6z"/>
  <path class="fil0 str0" d="M176.6 33l28.8 0c0.33,0 0.6,0.27 0.6,0.6l0 10.8c0,0.33 -0.27,0.6 -0.6,0.6l-28.8 0c-0.33,0 -0.6,-0.27 -0.6,-0.6l0 -10.8c0,-0.33 0.27,-0.6 0.6,-0.6z"/>
 </g>
</svg>
<script>
$("path").click(function() {
    $(this).attr('style','fill:#00FF00');
});
</script>
</body>
</html>

Answer 1

Нашел, как подключить внешний svg файл: там, где нужно отрисовать внешнее svg изображение, нужно вставить пустой div с каким-нибудь id, внутри которого и разместится изображение, например:

<div id="MySVG"></div>

Затем нужно прописать скрипт загрузки этого изображения в div, например:

$(function() {
  $('#MySVG').load('svg/МуSVGfile.svg');
});

Возможно, кому-нибудь пригодится.

БЛОГ НА HUSL

Скрипт заливки цветом контура svg

Ответы (1 шт):