將顏色更改為 SVG id

Question

我在 Illustrator 中制作了貓的 SVG 圖像。 我已經命名了我的圖層，所以我的貓眼命名為“眼睛”。

當我將 SVG 導入到開發人員 window 時，我可以看到圖層名稱在那里

<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>

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";
});

Answer 2

您可以在 svg 中添加一些樣式

.layerclass{
    fill:red;
}

此fill屬性更改 svg 的顏色。