Изменить ход и заполнить изображение svg с помощью javascript

Я пытаюсь изменить штрих и заполнить изображение .svg. Я получаю некоторую информацию от Можно ли манипулировать SVG-документом, встроенным в HTML-документ с JavaScript?.

Я использовал javascript для управления им, javascript в заголовке:

function svgMod(){
    var s = document.getElementById("svg_img");
    s.setAttribute("stroke","0000FF");
}

html:

...
<body onload="svgMod();">
<img id="svg_img" src="image.svg">  
...

Любая помощь оценивается!

РЕДАКТИРОВАТЬ: 1 Я думаю, что главная проблема здесь заключается в том, как отображать изображение svg как элемент svg, фактическое изображение, которое вместо окончания, например .png или .jpeg, использует окончание .svg, и, кроме того, как заполнение и ход его может то манипулировать!

Ответ 1

Если вы используете тег img, то по соображениям безопасности вы не сможете получить доступ к DOM данных изображения. Изображение фактически совпадает с анимированным растровым изображением относительно контейнера.

Использование тега <iframe> или <object> позволит вам манипулировать встроенным объектом DOM.

Ответ 2

Я уже ответил на что-то подобное раньше, сохраните этот фрагмент как html файл.

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in">
<circle id="circle1" r="30" cx="34" cy="34" style="fill: red; stroke: blue; stroke-width: 2"/>
</svg>
<button onclick=circle1.style.fill="yellow";>Click to change to yellow</button>

EDIT: Чтобы доказать, что эта функция может быть установлена в голове, здесь приведена модифицированная версия:

<html>
  <head>
  <script>
    function svgMod(){ 
      var circle1 = document.getElementById("circle1"); 
      circle1.style.fill="blue";
    } 
  </script>
  </head>
  <body>
  <svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in">
  <circle id="circle1" r="30" cx="34" cy="34" style="fill: red; stroke: blue; stroke-width: 2"/>
  </svg>
  <button onclick=circle1.style.fill="yellow";>Click to change to yellow</button>
  <button onclick=jacascript:svgMod();>Click to change to blue</button>
  </body>

</html>

Ответ 3

Я думаю, вам нужно будет изменить ход отдельного элемента, а не только самого элемента svg. Svg будет состоять из дерева узлов, и именно эти узлы имеют атрибут штриха.

Ответ 4

Вот пример simple, демонстрирующий изменение атрибута объекта SVG HTML с помощью javascript:

<html>
  <body>
    <svg>
      <rect id="A1" x="10" y="10" width="25" height="25" fill="red" />
    </svg>
  </body>

  <script>
    alert("Acknowledge to modify object color.");
    var object = document.getElementById("A1");
    object.setAttribute("fill", "green");
  </script>
</html>

Ответ 5

Я не уверен, что это было разрешено. Я столкнулся с аналогичным сценарием, и лучший способ - поместить файл svg в тег <bject> и изменить свойство свойства заливки не заполнить.

svgItem.style.stroke="lime";

Также вы можете обратиться к разделу: Изменение свойств CSS SVG в этой ссылке

Я тестировал это и мог изменить свойство удара. Пожалуйста, обратитесь к этому screnshot и ниже - пример кода, который работал у меня.

window.onload=function() {
	// Get the Object by ID
	var a = document.getElementById("svgObject");
	// Get the SVG document inside the Object tag
	var svgDoc = a.contentDocument;
	// Get one of the SVG items by ID;
	var svgItem = svgDoc.getElementById("pin1");
	// Set the colour to something else
	svgItem.style.stroke ="lime";
};