Question

我使用JS在屏幕上放置一个SVG，代码看起来像这样;

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>

我可以做些什么来改变它？

Answer 1

您可以将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));

（这是未经测试的，对于严肃的代码，这种形式可能过于草率。但它应该明确这个想法。）

动态更改svg图像id路径颜色

1 个答案: