Изменение файлов с помощью SVG JavaScript

Question

У меня есть файл под названием SVG "heartn.svg" со следующим кодом:

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 127.3 104.4" style="enable-background:new 0 0 127.3 104.4;" xml:space="preserve" > 
<style type="text/css" > 
    .st0{fill:#FFFFFF;} 
</style> 
<g id="stuff"> 
    <path class="st0" id= "int" d="M21,72.3c5,5,8.9,8.1,16.8,14.3c11.3,8.9,12.7,8.6,16.7,12.2c2,1.8,4.5,2.9,6.7,4.4c0.8,0.6,1.8,1.2,3,1.1 
     c1.1-0.1,1.7-0.8,3.5-2.2c0.9-0.7,0.6-0.4,3.1-2c5.2-3.4,10.6-7.3,10.6-7.3c5.9-4.3,10.3-7.8,11.7-8.9c5.4-4.4,8.7-7,12.9-11.2 
     c1.1-1.1,4.8-4.8,9.2-10.3c0.4-0.4,0.7-0.9,1-1.3c0,0,0,0,0,0H11.2C13.6,64.3,16.8,68.1,21,72.3z"/> 
    <path class="st0" d="M125.1,47.7c1.8-5,2-9.5,2.1-11.7c0.2-4.1-0.2-7.4-0.5-9.2c-0.3-2.1-0.8-4.8-2.1-8c-0.7-1.8-2.7-6.1-7-10.3 
     c-1.6-1.6-5.3-5.1-11.2-7c-4.7-1.5-8.7-1.4-11-1.2c-4.3,0.2-7.5,1.3-9.4,1.9c-1,0.3-5.5,1.9-10.6,5.4c-1.5,1.1-4,2.7-6.5,5.4 
     c-1.4,1.5-2,2.2-2.7,3.4c-1.2,2-1.6,3.7-2.3,3.6c-0.5,0-0.7-0.7-1.1-1.5c-0.1-0.2-1.1-1.5-3.1-4.1C56.1,9.5,51,6.1,51,6.1 
     c-1.7-1.2-6.3-4.1-13-5.3c-3-0.6-9.6-1.7-17.3,1.1c-2.3,0.8-7.6,3-12.2,8.3c-5.7,6.3-7,13.2-7.7,17.1c-0.5,2.6-1.3,7.3-0.3,13.1 
     c0.3,1.4,0.9,4.5,3.6,9.7c0,0,0,0,0,0h120.1C124.5,49.3,124.9,48.5,125.1,47.7z"/> 
</g> 
</svg> 

Я хочу изменить:

.st0{fill:#FFFFFF;} 

с помощью JavaScript.

В моем HTML файл У меня есть файл, который отображается с помощью следующего кода:

<img id="heart" src="images/heartn.svg" alt="heart" /> 

до сих пор Javascript в моем HTML-файл выглядит следующим образом:

if (jsonObj.heart>16) { 
      var heart_img=document.getElementById("heart"); 

     }; 

Я действительно дону» я знаю, что делать, я попытался добавить id в файл svg, но я не могу найти способ изменить цвет.

Любая помощь будет оценена по достоинству. Благодаря!

******** EDIT *******

if (jsonObj.heart>16) { 
      var heart_img=document.getElementById("heart").contentDocument; 
      heart_img.getElementByClassName("st0").setAttribute("fill", "FF0000"); 

     }; 

Я попробовал это, и это не работает.

Answer 1

Начиная с

<iframe id="heart" src="images/heartn.svg" frameborder="0" onload="modify()"></iframe> 

нам нужна функция (в HTML файл), который выглядит примерно так ...

function modify() { 
    // get the remote document 
    var doc = document.getElementById("heart").contentDocument; 
    // modify the style element's style 
    doc.styleSheets[0].cssRules[0].style.fill = "#FF0000"; 
} 

Вы имеете одну таблицу стилей в документе, поэтому это StyleSheets [0]

<style type="text/css" > 
    .st0{fill:#FFFFFF;} 
</style> 

Эта таблица стилей имеет одно правило (.st0), следовательно, cssRules [0], который мы изменяем. Изменение правила влияет на все, что указывает на это.

Вы по-прежнему можете изменить правило стиля, если вы установите строку svg inline, вы просто должны использовать глобальный документ html, а не документ iframe.

Я действительно не могу демонстрацию в фрагменте стека (потому что мне нужен другой файл), а фрагменты стека вставляют сами стили, что означает, что мне нужно использовать stylesheets [1] ниже. Это работает в Firefox и Safari:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
     viewBox="0 0 127.3 104.4" style="enable-background:new 0 0 127.3 104.4;" xml:space="preserve" > 
 
    <style type="text/css" > 
 
     .st0{fill:#FFFFFF;} 
 
    </style> 
 
    <g id="stuff"> 
 
     <path class="st0" id= "int" d="M21,72.3c5,5,8.9,8.1,16.8,14.3c11.3,8.9,12.7,8.6,16.7,12.2c2,1.8,4.5,2.9,6.7,4.4c0.8,0.6,1.8,1.2,3,1.1 
 
      c1.1-0.1,1.7-0.8,3.5-2.2c0.9-0.7,0.6-0.4,3.1-2c5.2-3.4,10.6-7.3,10.6-7.3c5.9-4.3,10.3-7.8,11.7-8.9c5.4-4.4,8.7-7,12.9-11.2 
 
      c1.1-1.1,4.8-4.8,9.2-10.3c0.4-0.4,0.7-0.9,1-1.3c0,0,0,0,0,0H11.2C13.6,64.3,16.8,68.1,21,72.3z"/> 
 
     <path class="st0" d="M125.1,47.7c1.8-5,2-9.5,2.1-11.7c0.2-4.1-0.2-7.4-0.5-9.2c-0.3-2.1-0.8-4.8-2.1-8c-0.7-1.8-2.7-6.1-7-10.3 
 
      c-1.6-1.6-5.3-5.1-11.2-7c-4.7-1.5-8.7-1.4-11-1.2c-4.3,0.2-7.5,1.3-9.4,1.9c-1,0.3-5.5,1.9-10.6,5.4c-1.5,1.1-4,2.7-6.5,5.4 
 
      c-1.4,1.5-2,2.2-2.7,3.4c-1.2,2-1.6,3.7-2.3,3.6c-0.5,0-0.7-0.7-1.1-1.5c-0.1-0.2-1.1-1.5-3.1-4.1C56.1,9.5,51,6.1,51,6.1 
 
      c-1.7-1.2-6.3-4.1-13-5.3c-3-0.6-9.6-1.7-17.3,1.1c-2.3,0.8-7.6,3-12.2,8.3c-5.7,6.3-7,13.2-7.7,17.1c-0.5,2.6-1.3,7.3-0.3,13.1 
 
      c0.3,1.4,0.9,4.5,3.6,9.7c0,0,0,0,0,0h120.1C124.5,49.3,124.9,48.5,125.1,47.7z"/> 
 
    </g> 
 
    <script> 
 
     document.styleSheets[1].cssRules[0].style.fill = "#FF0000"; 
 
    </script> 
 
    </svg>

Answer 2

Вы сможете манипулировать svg с помощью javascript, если вы добавите элемент в свой html вместо ссылки на него в теге изображения.

ie.

<svg id="heart"...> ... </svg>

Это не должно быть внутри фрейма. Одним из вариантов было бы добавить класс к пути с помощью javascript. Поэтому вы можете, например, добавить класс 'active' в .str0.

Ваш CSS будет выглядеть следующим образом:

.str0 { 
fill : <some color> 
} 
.str0.active { 
fill:#00ff00; 
} 

Вы можете добавить класс либо JQuery `$ ('str0.) AddClass (« активный');. от

el = document.getElementsByClassName("str0"); 
el[0].className = el[0].className += " active"; 

Это будет работать до IE9.

Также стоит проверить JQuery SVGdom

EDIT

var el = document.getElementsByClassName('st0'); 
el[0].style.fill = "#FF0000"; 

Edited включить простой способ изменения цвета, как указано в комментариях ниже.