使用 javascript 更改 SVG 图像颜色答案

【问题标题】：Changing SVG image color with javascript使用 javascript 更改 SVG 图像颜色
【发布时间】：2012-04-10 00:07:18
【问题描述】：

我正在尝试使用 javascript 更改 svg 图像颜色。这可能吗？我可以将它作为一个对象加载，然后以某种方式访问颜色/图像数据。

每一个回复或提示都非常感谢！

【问题讨论】：

当然是彼得！你的意思是投票给你的答案？
您也可以投票，但最好将我的答案作为接受的答案（geen v 标记），谢谢

【解决方案1】：

对于背景颜色 - fill 属性可以这样访问：

svgElement.style.fill = '#fff';

要设置边框颜色，请对 stroke 属性执行相同操作。

查看实际操作：

const svgElement = document.getElementById('svg')
const checkboxElement = document.getElementById('check')

checkboxElement.addEventListener('change', e => {
  svgElement.style.fill = e.target.checked ? 'PapayaWhip' : 'PeachPuff'
})

<input type="checkbox" id="check" />
<svg id="svg" fill="AliceBlue">
  <circle r="50" cx="70" cy="70" />
</svg>

请参阅W3C reference on SVG 了解更多功能，因为这是一个广泛的问题。

【讨论】：

@peter 你是对的，应该访问对象属性。我相应地更新了我的答案，谢谢。
另外，渐变不是这样工作的，通常你必须先定义（例如 grad1）一个，然后你可以通过 fill="url(#grad1)" 访问它
@peter 再次，正确 - 这是从我的 Raphael API 代码粘贴的。这是发送到attr() 方法的值。删除了，谢谢。
立即响应！
@AndroidDev，你能用演示证明吗？

【解决方案2】：

我可能回复得太晚了，但我就是这样做的！有很多方法可以使用颜色我实际上是使用画布从像素中获取 rgba 并动态更改它，但是对于这个示例，我只是将 ramdon 颜色用于 rgba，你也可以使用任何你想要的颜色, 它不一定是 rgba

//First 
const fs = require("fs");
const path = require("path");
const uuid = require('uuid');

顺便说一句，我使用 uuid 只是为了在每次保存 svg 时动态更改名称，因此它不会覆盖原始名称，但如果您只想使用代码一次，则不需要。还请记住，并非所有 svg 图像都具有属性“stroke”或“fill”，它们通常位于样式或 <path></path> 中，因此您需要在该部分上稍作调整，当缺少该属性时，我通常只是添加它根据 svg 的颜色手动添加，例如，如果它是黑色的，我只是添加 fill="rgba(0,0,0,1)" 或 stroke="rgba(0,0,0,1)" 或有时两者都取决于 svg

//Inside svg
<g id="#svgColor">
<path fill="rgba(0,0,0,1)".........lots of codes />
<path fill="rgba(0,0,0,1)".........lots of codes />
<path fill="rgba(0,0,0,1)".........lots of codes />
</g>

逻辑部分

//svgColor.js 
const fs = require("fs");
const path = require("path");
const uuid = require("uuid");

const changeSvgColor = () => {
  try {
    var r = Math.floor(Math.random() * 255);
    var g = Math.floor(Math.random() * 255);
    var b = Math.floor(Math.random() * 255);
    var a = Math.floor(Math.random() * 255);

    const svgCode = fs.readFileSync(
      path.resolve(__dirname, "./assets/watermark.svg"),
      "utf8"
    );
    coloredSvgXml = svgCode.replaceAll(
      "rgba(0,0,0,1)",
      `rgba(${r},${g},${b},${a})`
    );
    fs.writeFile(
      `./myFolder/assets/${uuid.v4()}.svg`,
      coloredSvgXml,
      function (err) {
        console.log(err);
      }
    );
  } catch (error) {
    console.log(error);
  }
};

module.exports = {
    changeSvgColor,
  };

在此之后，然后创建一个 index.js 文件（如果需要），调用你的函数，你应该准备好了：D

//index.js

const changeColor = require('./myFolder/svgColor');
changeColor.changeSvgColor();

从你的终端运行它

node index.js

【讨论】：

【解决方案3】：

您的 SVG 必须内嵌在文档中才能使用 CSS 设置样式。这可以通过将 SVG 标记直接写入 HTML 代码或使用 SVG 注入来完成，该注入将 img 元素替换为内容，并将 SVG 文件替换为 Javascript。

有一个名为SVGInject 的开源库可以为您完成这项工作。您所要做的就是将属性onload="SVGInject(this)" 添加到您的<img> 标记中。

一个使用 SVGInject 的简单示例如下所示：

<html>
  <head>
    <script src="svg-inject.min.js"></script>
  </head>
  <body>
    <img src="image.svg" onload="SVGInject(this)" />
  </body>
</html>

加载图像后，onload="SVGInject(this) 将触发注入，<img> 元素将替换为src 属性中提供的 SVG 文件的内容。

【讨论】：

【解决方案4】：

在上述基础上构建，但具有动态创建和矢量图像，而不是绘图。

function svgztruck() {
    tok = "{d path value}"
    return tok;
}

function buildsvg( eid ) {
    console.log("building");
    var zvg = "svg" + eid;
    var vvg = eval( zvg );
    var raw = vvg();

    var svg = document.getElementById( eid );
    svg.setAttributeNS(null,"d", raw );
    svg.setAttributeNS(null,"fill","green");
    svg.setAttributeNS(null,"onlick", eid + ".style.fill=#FF0000");
    return;
}

您可以拨打电话：

<img src="" onerror="buildscript">

现在您可以通过子元素添加颜色并直接操作 dom 的所有元素。首先在 svg html 上实现视图框和高度宽度很重要，上面的示例中没有这样做。

没有必要让你的代码只有 10 页，但我该争论谁。最好使用PHP。

svg 构建的内部元素是一个简单的<svg lamencoding id=parenteid><path id=eid><svg>，没有别的。

【讨论】：

示例调用适用于没有创造力的人......咳咳

【解决方案5】：

当然，这是一个示例（省略了标准 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>

【讨论】：

OP 要求将<svg> 元素引用为<object>；这个答案没有这样做。
这取决于你如何定义一个对象，在我的情况下，SVG 不是由
@WebWanderer - 不，不是。从onclick 运行的代码绝对是更改填充颜色的 JavaScript 代码。最后我知道 HTML 没有点符号或分号结束行。
@WebWanderer - 我不确定你所说的“你提供”是什么意思，我没有“提供”任何东西。但是，只需要一点 javascript 就可以了，这就是为什么它就在那里。它非常有效，正如这个 jsfiddle 所证明的那样：jsfiddle.net/3ug5f1ru
这个答案只是内联 SVG 的一个简单示例。从未见过绕过 document.getElementById 并仅使用“id”作为对象（circle1）的技巧，这可能不会到处运行。问题中的“对象”一词含糊不清。确实是某种 DOM 对象引用，但是是 <svg> 或 <object>？ “将其加载为对象”可以合理地表示将外部 SVG 文件加载到 <object> 中，在这种情况下，此示例不适用。如果使用对象标签，document.getElementById( 'obj-id' ).contentDocument.getElementById( 'circle1' ).style.fill = 'yellow' 会起作用。请参阅下面的答案。

【解决方案6】：

如果只是关于颜色并且没有特定的 JavaScript 需求，您也可以将它们转换为字体。 This link 让您有机会创建基于 SVG 的字体。但是，之后无法使用 img 属性 - 例如“alt”。这也限制了您的网站对盲人等的可访问性。

【讨论】：

【解决方案7】：

这是用于<object> SVG，className 是 .svgClass

<object class="svgClass" type="image/svg+xml" data="image.svg"></object>

所以 JavaScript 代码是这样的：

// change to red
    document.querySelector(".svgClass").getSVGDocument().getElementById("svgInternalID").setAttribute("fill", "red")

要更改 svgInternalID，您必须打开 SVG 纯 .txt 文件（即 image.svg）并对其进行编辑

<path id="svgInternalID"

【讨论】：

Andrew S，据我所知，这是 Javascript Web API - developer.mozilla.org/en-US/docs/Web/API/Document/querySelector - 有关 SVG 脚本的更多信息 - developer.mozilla.org/en-US/docs/Web/SVG
感谢您告诉我。
getSVGDocument() 已弃用，建议改用contentDocument 属性，请参阅w3.org/TR/SVG11/…
可以使用“img”标签代替“object”标签吗？因为 svg 图像在“img”标签中缩放时不会缩放到对象标签的宽度/高度

【解决方案8】：

给定一些 SVG：

<div id="main">
  <svg id="octocat" xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="-60 0 420 330" style="fill:#fff;stroke: #000; stroke-opacity: 0.1">
    <path id="puddle" d="m296.94 295.43c0 20.533-47.56 37.176-106.22 37.176-58.67 0-106.23-16.643-106.23-37.176s47.558-37.18 106.23-37.18c58.66 0 106.22 16.65 106.22 37.18z"/>
    <path class="shadow-legs" d="m161.85 331.22v-26.5c0-3.422-.619-6.284-1.653-8.701 6.853 5.322 7.316 18.695 7.316 18.695v17.004c6.166.481 12.534.773 19.053.861l-.172-16.92c-.944-23.13-20.769-25.961-20.769-25.961-7.245-1.645-7.137 1.991-6.409 4.34-7.108-12.122-26.158-10.556-26.158-10.556-6.611 2.357-.475 6.607-.475 6.607 10.387 3.775 11.33 15.105 11.33 15.105v23.622c5.72.98 11.71 1.79 17.94 2.4z"/>
    <path class="shadow-legs" d="m245.4 283.48s-19.053-1.566-26.16 10.559c.728-2.35.839-5.989-6.408-4.343 0 0-19.824 2.832-20.768 25.961l-.174 16.946c6.509-.025 12.876-.254 19.054-.671v-17.219s.465-13.373 7.316-18.695c-1.034 2.417-1.653 5.278-1.653 8.701v26.775c6.214-.544 12.211-1.279 17.937-2.188v-24.113s.944-11.33 11.33-15.105c0-.01 6.13-4.26-.48-6.62z"/>
    <path id="cat" d="m378.18 141.32l.28-1.389c-31.162-6.231-63.141-6.294-82.487-5.49 3.178-11.451 4.134-24.627 4.134-39.32 0-21.073-7.917-37.931-20.77-50.759 2.246-7.25 5.246-23.351-2.996-43.963 0 0-14.541-4.617-47.431 17.396-12.884-3.22-26.596-4.81-40.328-4.81-15.109 0-30.376 1.924-44.615 5.83-33.94-23.154-48.923-18.411-48.923-18.411-9.78 24.457-3.733 42.566-1.896 47.063-11.495 12.406-18.513 28.243-18.513 47.659 0 14.658 1.669 27.808 5.745 39.237-19.511-.71-50.323-.437-80.373 5.572l.276 1.389c30.231-6.046 61.237-6.256 80.629-5.522.898 2.366 1.899 4.661 3.021 6.879-19.177.618-51.922 3.062-83.303 11.915l.387 1.36c31.629-8.918 64.658-11.301 83.649-11.882 11.458 21.358 34.048 35.152 74.236 39.484-5.704 3.833-11.523 10.349-13.881 21.374-7.773 3.718-32.379 12.793-47.142-12.599 0 0-8.264-15.109-24.082-16.292 0 0-15.344-.235-1.059 9.562 0 0 10.267 4.838 17.351 23.019 0 0 9.241 31.01 53.835 21.061v32.032s-.943 11.33-11.33 15.105c0 0-6.137 4.249.475 6.606 0 0 28.792 2.361 28.792-21.238v-34.929s-1.142-13.852 5.663-18.667v57.371s-.47 13.688-7.551 18.881c0 0-4.723 8.494 5.663 6.137 0 0 19.824-2.832 20.769-25.961l.449-58.06h4.765l.453 58.06c.943 23.129 20.768 25.961 20.768 25.961 10.383 2.357 5.663-6.137 5.663-6.137-7.08-5.193-7.551-18.881-7.551-18.881v-56.876c6.801 5.296 5.663 18.171 5.663 18.171v34.929c0 23.6 28.793 21.238 28.793 21.238 6.606-2.357.474-6.606.474-6.606-10.386-3.775-11.33-15.105-11.33-15.105v-45.786c0-17.854-7.518-27.309-14.87-32.3 42.859-4.25 63.426-18.089 72.903-39.591 18.773.516 52.557 2.803 84.873 11.919l.384-1.36c-32.131-9.063-65.692-11.408-84.655-11.96.898-2.172 1.682-4.431 2.378-6.755 19.25-.80 51.38-.79 82.66 5.46z"/>
    <path id="face" d="m258.19 94.132c9.231 8.363 14.631 18.462 14.631 29.343 0 50.804-37.872 52.181-84.585 52.181-46.721 0-84.589-7.035-84.589-52.181 0-10.809 5.324-20.845 14.441-29.174 15.208-13.881 40.946-6.531 70.147-6.531 29.07-.004 54.72-7.429 69.95 6.357z"/>
    <path id="eyes" d="m160.1 126.06 c0 13.994-7.88 25.336-17.6 25.336-9.72 0-17.6-11.342-17.6-25.336 0-13.992 7.88-25.33 17.6-25.33 9.72.01 17.6 11.34 17.6 25.33z m94.43 0 c0 13.994-7.88 25.336-17.6 25.336-9.72 0-17.6-11.342-17.6-25.336 0-13.992 7.88-25.33 17.6-25.33 9.72.01 17.6 11.34 17.6 25.33z"/>
    <path id="pupils" d="m154.46 126.38 c0 9.328-5.26 16.887-11.734 16.887s-11.733-7.559-11.733-16.887c0-9.331 5.255-16.894 11.733-16.894 6.47 0 11.73 7.56 11.73 16.89z m94.42 0 c0 9.328-5.26 16.887-11.734 16.887s-11.733-7.559-11.733-16.887c0-9.331 5.255-16.894 11.733-16.894 6.47 0 11.73 7.56 11.73 16.89z"/>
    <circle id="nose" cx="188.5" cy="148.56" r="4.401"/>
    <path id="mouth" d="m178.23 159.69c-.26-.738.128-1.545.861-1.805.737-.26 1.546.128 1.805.861 1.134 3.198 4.167 5.346 7.551 5.346s6.417-2.147 7.551-5.346c.26-.738 1.067-1.121 1.805-.861s1.121 1.067.862 1.805c-1.529 4.324-5.639 7.229-10.218 7.229s-8.68-2.89-10.21-7.22z"/>
    <path id="octo" d="m80.641 179.82 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m8.5 4.72 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m5.193 6.14 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m4.72 7.08 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m5.188 6.61 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m7.09 5.66 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m9.91 3.78 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m9.87 0 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m10.01 -1.64 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z"/>
    <path id="drop" d="m69.369 186.12l-3.066 10.683s-.8 3.861 2.84 4.546c3.8-.074 3.486-3.627 3.223-4.781z"/>
  </svg>
</div>

例如，使用 jQuery，您可以这样做：

var _currentFill = "#f00"; // red
$svg = $("#octocat");
$("#face", $svg).attr('style', "fill:"+_currentFill); })

我提供了一个着色书演示作为另一个 stackoverflow 问题的答案：http://bl.ocks.org/4545199。在 Safari、Chrome 和 Firefox 上测试。

【讨论】：

【解决方案9】：

这是一个完整的example，它展示了如何修改通过、

另见How to apply a style to an embedded SVG?

【讨论】：

我认为你应该详细说明一下答案，不鼓励使用链接回答