将颜色更改为SVG id

Question

我在Illustrator中制作了一张猫的SVG图像。我已经命名了我的层，所以我有我的猫眼睛命名为“眼睛”。

将SVG导入到开发人员窗口时，可以看到图层名称在那里

<g id="eyes">
  <path class="cls-1" d="M.25,766.38c2.52,9,16.26,23.83,35.15,39.06s3
  ...

现在，我想通过JavaScript将颜色更改为eyes。我该怎么做？

HTML：

<object id="bild" data="a.svg" type="image/svg+xml"></object>

JavaScript：

var catImage = document.getElementById( 'bild');
catImage.layerName.style="fill:red";

Answer 1

在<object>或<img>标记内导入的SVG不能由主页的css或javascript直接设置样式。

但是，对于<object>，可以通过object元素的contentDocument属性获得这样的访问权限。

在你的情况下，那将是...

let cat = document.getElementById('bild').contentDocument;

但是，只有在页面完全加载并呈现之后，contentDocument属性才可用。因此，您需要将代码放在加载事件处理程序中。

对你来说那就是..。

window.addEventListener("load", function() {
  let cat = document.getElementById('bild').contentDocument;
  let eyes = cat.getElementById('eyes');
  eyes.style.fill="red";
});