Question

我刚刚开始使用SVG，我面临一个问题 - 我无法改变通过＆＃34;对象＆＃34;粘贴的SVG图像的颜色。

我有以下代码：

<object data="../img/svg/test.svg" type="image/svg+xml"></object>

test.svg文件：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="949.3px" height="949.3px" viewBox="0 0 949.3 949.3" style="enable-background:new 0 0 949.3 949.3;" xml:space="preserve">
<g>
    <path d="M899.3,338.1L544,337.7c0,0,20.6-84.3,24.3-123.8c2.5-27,3.101-53.9-3.1-80.5c-9.2-40-19.5-65-35.9-96   C520.5,21,503.5,10.8,485,10.8h-68.8c-27.7,0-50.101,22.5-50,50.2c0.2,46.3,0.2,108.1-0.8,110.2C338.4,228,307.1,282.5,271.8,334.5   c-16.1,23.8-33,46.9-52.6,68c-8.6,9.2-13.3,21.4-13.3,33.9v437.201c0,12.898,5,25.398,14,34.699   c13.4,13.801,37.4,30.199,76.8,30.199c124.3-0.5,325.7-1.6,468.899-0.6c17.9,0.1,34.5-9.299,43.5-24.799L935.4,696.9   c8.6-15,13.1-32,13.199-49.299l0.7-259.301C949.3,360.6,926.9,338.2,899.3,338.1z"/>
    <path d="M94.8,409.5H50c-27.6,0-50,22.4-50,50v429c0,27.602,22.4,50,50,50h44.7c27.6,0,50-22.398,50-50v-429   C144.8,431.9,122.4,409.5,94.8,409.5z"/>
</g>

如何更改此SVG的颜色？我已经尝试了不同的方法来嵌入SVG和＃34;填充：＆＃34;，但由于某种原因它不起作用。

提前致谢！

Answer 1

SVG reference

使用您需要的颜色代码添加诸如fill =“black”或stroke =“red”作为目标元素。

示例：

<g fill="blue">

Answer 2

从另一个answer of myself派生出来，这会产生一只绿色的手，点击该按钮会将其变为黄色。

  <svg fill="green" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="949.3px" height="949.3px" viewBox="0 0 949.3 949.3" style="enable-background:new 0 0 949.3 949.3;" xml:space="preserve" >
  <g>
      <path d="M899.3,338.1L544,337.7c0,0,20.6-84.3,24.3-123.8c2.5-27,3.101-53.9-3.1-80.5c-9.2-40-19.5-65-35.9-96   C520.5,21,503.5,10.8,485,10.8h-68.8c-27.7,0-50.101,22.5-50,50.2c0.2,46.3,0.2,108.1-0.8,110.2C338.4,228,307.1,282.5,271.8,334.5   c-16.1,23.8-33,46.9-52.6,68c-8.6,9.2-13.3,21.4-13.3,33.9v437.201c0,12.898,5,25.398,14,34.699   c13.4,13.801,37.4,30.199,76.8,30.199c124.3-0.5,325.7-1.6,468.899-0.6c17.9,0.1,34.5-9.299,43.5-24.799L935.4,696.9   c8.6-15,13.1-32,13.199-49.299l0.7-259.301C949.3,360.6,926.9,338.2,899.3,338.1z"/>
      <path d="M94.8,409.5H50c-27.6,0-50,22.4-50,50v429c0,27.602,22.4,50,50,50h44.7c27.6,0,50-22.398,50-50v-429   C144.8,431.9,122.4,409.5,94.8,409.5z"/>
  </g>
</svg>
<button onclick=Capa_1.style.fill="yellow";>Click to change to yellow</button>

SVG对象 - 更改颜色

2 个答案: