web-dev-qa-db-ja.com

javascriptでsvg画像のストロークと塗りつぶしを変更する

.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の末尾を使用し、さらにその塗りつぶしとストロークをどのように操作できるかを示します！

javascripthtmlsvg
24
Potney Switters

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

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

38
Robert Longson

このスニペットを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>
8
peter

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

2
Phil H

JavaScriptを使用してSVG HTMLオブジェクトの属性を変更する例を示すsimpleの例を次に示します。

<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>
1
evilspacepirate

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

svgItem.style.stroke="Lime";

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

これをテストして、ストロークのプロパティを変更できました。これを参照してください 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";
};
0
Arun