動態更改svg圖像id路徑顏色

我使用JS將SVG放在屏幕上的代碼看起來像這樣;動態更改svg圖像id路徑顏色

var imageObj = new Image(); 

imageObj.onload = function() { 
context.drawImage(imageObj, 0, 0); 
}; 

imageObj.src = mysvg.svg;

但現在我想改變它的顏色。但只有stroke1 id路徑

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<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" 
    width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> 
<path id="stroke1" d="M104.172,243.778c-19.76,28.41-32.721,45.681-38.883,51.843l-25.922-33.328c46.896-56.761,77.766-127.757,92.578-212.929 
    l37.031,12.961c7.405,3.703,6.77,6.799-1.853,9.258c-6.19,34.572-16.058,67.293-29.625,98.133L104.172,243.778z"/> 
<path d="M241.188,156.754c-16.058,32.113-33.328,58.643-51.845,79.617l-27.772-24.07c33.328-35.787,58.006-88.238,74.063-157.383 
    l35.18,3.703c12.324,2.488,11.718,6.799-1.852,12.961l-14.813,49.993L241.188,156.754z"/> 
<path d="M256,249.333c11.109,3.703,10.473,8.042-1.852,12.96c-11.109,62.953-26.56,111.73-46.289,146.273l-33.328-16.664 
    c20.975-35.787,36.395-85.779,46.289-149.977L256,249.333z"/> 
<path d="M405.977,238.223c27.138,56.791,46.289,104.931,57.398,144.421l-40.734,12.961c-9.895-40.734-26.559-89.482-49.991-146.273 
    L405.977,238.223z"/> 
<path d="M103.172,468.816V243.563l33.758-75.02l8.485,2.122l0.196,0.196c1.779,1.779,2.565,3.631,2.335,5.503 
    c-0.293,2.384-2.173,4.635-5.744,6.872v285.58H103.172z"/> 
<polygon points="382.413,218.462 408.168,157.754 239.753,157.754 253.451,120.575 418.319,120.575 424.109,108.995 
    466.786,138.093 456.82,148.059 423.218,232.064 "/> 
<path d="M335.616,156.754V436.34c0,19.73-8.65,29.625-25.922,29.625h-49.992l-11.108-38.883h42.586c4.918,0,7.405-2.459,7.405-7.406 
    V156.754H335.616z"/> 
</svg>

我該怎麼做才能改變它？

來源

2012-11-25 Rafael Milewski

您可以將SVG嵌入然後對其進行操作，例如，（試穿jsFiddle）：

<html> 
    <head> 
    <title></title> 
    <script type="text/javascript"> 
     var changeColor = function() { 
     document.getElementById("stroke1").setAttribute("style","fill:red") 
     }; 
    </script> 
    </head> 
    <body onload="changeColor()"> 
    <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" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> 
     <path id="stroke1" d="M104.172,243.778c-19.76,28.41-32.721,45.681-38.883,51.843l-25.922-33.328c46.896-56.761,77.766-127.757,92.578-212.929  l37.031,12.961c7.405,3.703,6.77,6.799-1.853,9.258c-6.19,34.572-16.058,67.293-29.625,98.133L104.172,243.778z"/> 
     <path d="M241.188,156.754c-16.058,32.113-33.328,58.643-51.845,79.617l-27.772-24.07c33.328-35.787,58.006-88.238,74.063-157.383  l35.18,3.703c12.324,2.488,11.718,6.799-1.852,12.961l-14.813,49.993L241.188,156.754z"/> 
     <path d="M256,249.333c11.109,3.703,10.473,8.042-1.852,12.96c-11.109,62.953-26.56,111.73-46.289,146.273l-33.328-16.664  c20.975-35.787,36.395-85.779,46.289-149.977L256,249.333z"/> 
     <path d="M405.977,238.223c27.138,56.791,46.289,104.931,57.398,144.421l-40.734,12.961c-9.895-40.734-26.559-89.482-49.991-146.273  L405.977,238.223z"/> 
     <path d="M103.172,468.816V243.563l33.758-75.02l8.485,2.122l0.196,0.196c1.779,1.779,2.565,3.631,2.335,5.503  c-0.293,2.384-2.173,4.635-5.744,6.872v285.58H103.172z"/> 
     <polygon points="382.413,218.462 408.168,157.754 239.753,157.754 253.451,120.575 418.319,120.575 424.109,108.995  466.786,138.093 456.82,148.059 423.218,232.064 "/> 
     <path d="M335.616,156.754V436.34c0,19.73-8.65,29.625-25.922,29.625h-49.992l-11.108-38.883h42.586c4.918,0,7.405-2.459,7.405-7.406  V156.754H335.616z"/> 
    </svg> 
    </body> 
</html>

編輯：要獲取SVG並使其在線，我也許還可以利用這樣的：

request = new XMLHttpRequest(); 
request.overrideMimeType("image/svg+xml"); 
request.open("GET",filename,false); 
request.send(""); 
document.body.appendChild(document.adoptNode(request.responseXML.documentElement));

（這是未經測試，以這種形式可能太但它應該表明這個想法）

來源

2012-11-25 02:11:44

問題是，我不能只寫在html上的svg ...我將得到500 svg比其他更大......它和它動態通過使用「imageObj.src = VARIABLE」... –

它是一個選項加載圖像使用Ajax而不是Image對象？然後你可以把它們作爲內聯SVG扔進去。數據必須由瀏覽器以某種方式加載和處理。我將在我的建議中包含這一點。 –

您需要將節點導入到文檔中，然後才能追加它們，否則您可能會遇到安全異常。 'document.body.appendChild（document.adoptNode（request.responseXML.documentElement））;'或'document.body.appendChild（document.importNode（request.responseXML.documentElement））;'（前者是首選）。 –

動態更改svg圖像id路徑顏色

回答

相關問題