30

.svg 画像のストロークと塗りを変更しようとしています。JavaScript を使用してHTML ドキュメントに埋め込まれた SVG ドキュメントを操作することは可能ですか? .

私はそれを操作するために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 の末尾を使用する実際の画像、さらには塗りつぶしとストロークをどのように表示するかだと思いますそれを操作することができます!

4

5 に答える 5

45

img タグを使用すると、セキュリティ上の理由から、画像データの DOM にアクセスできなくなります。イメージは、コンテナに関する限り、アニメーション化されたビットマップと事実上同じです。

<iframe>orタグを使用<object>すると、埋め込みオブジェクトの DOM を操作できます。

于 2012-04-13T13:15:53.767 に答える
9

以前にこのような回答をしたことがあります。このスニペットを 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>

編集:この関数を頭の中で設定できることを証明するために、ここに修正版があります:

<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>
于 2012-04-13T10:59:29.420 に答える
3

svg 要素自体だけでなく、個々の要素のストロークを変更する必要があると思います。svg はノードのツリーで構成され、ストローク属性を持つのはこれらのノードです。

于 2012-04-13T11:01:38.553 に答える
2

これが解決されたかどうかはわかりません。私は同様のシナリオを経験しましたが、最良の方法は、svg ファイルを<bject>タグに入れて、塗りつぶしプロパティではなくストローク プロパティを変更することです。

svgItem.style.stroke="lime";

また、セクションを参照することもできます: このリンクの SVG の CSS プロパティの変更

これをテストしたところ、ストローク プロパティを変更できました。このスクレンショットを参照してください。以下は、私のために働いたサンプルコードです。

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";
};

于 2016-12-14T14:33:25.647 に答える
1

次に、javascriptを使用してSVGHTMLオブジェクトの属性を変更する方法を示す簡単な例を示します。

<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>
于 2013-03-20T17:43:23.750 に答える