将颜色更改为SVG ID

Question

我在插画家中制作了猫的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，我想将颜色更改为眼睛。我怎么做？我研究了好几天都没有找到答案。

HTML：

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

JS：

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

我知道这到处都是错误的，但是..我想像这样吗？

Answer 1

<object>或<img>标记中导入的SVG不能直接通过宿主页面的CSS或JavaScript设置样式。

但是，对于<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";
});

Answer 2

将属性用于svg：

.layerclass{
    fill:red;
}