如何從CSS訪問SVG文件中的元素？

Question

• 我有一個svg文件。 我通過<object data = "img/img.svg" type = "image/svg + xml">...
• svg文件包含標簽"path"和屬性"fill" 。
• 此svg文件需要使用幾次，並為"fill"使用不同的顏色。 必須使用div.red #pathId {fill: red}和div.green #pathId {fill: green}
• CSS屬性不適用於此svg文件，因為在頁面上它類似於iframe方式，並且=> css不適用。
• 我知道我們可以在SVG文件中指定CSS文件的路徑。 但是，此CSS文件的所有樣式僅用於SVG文件。 （ .red和.green在SVG和不可用=>它不適用）

有沒有不使用JS的解決方案？ （使用JS，我們可以通過.contentDocument獲取SVG的內容並設置fill屬性）

Answer 1

僅當SVG是HTML-DOM的元素時，您才能訪問SVG，如下所示：

<div class="svg">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="566.93px" height="1133.858px" viewBox="0 0 566.93 1133.858" enable-background="new 0 0 566.93 1133.858" xml:space="preserve">...</svg>
</div>

這是我的一個項目的html代碼段。 在全局CSS中，有一些基本樣式：

.svg {
  height: 400px;
  width: 400px;
}

svg {
  height: 100%;
  width: 100%;
}

為了包括SVG，我使用以下機制：

HTML：

<div class="svg" data-svgpath="img/img.svg"></div>

JS：

function loadSvg(container) {
    if (container.dataset.svgpath) {
        $(container).load(container.dataset.svgpath, function(resp, status, xhr) {
            container.classList.add('is-loaded');
        });
    }
}

加載SVG並注入DOM：

$('.svg').each(function() {
    loadSvg(this);
});

這是我在項目中所做的簡短摘要，它的工作原理很吸引人。 我可以通過全局css和js進行訪問，因為我也可以控制SVG中組的可見性。

內嵌svg的瀏覽器支持非常好： http : //caniuse.com/#feat=svg-html5

編輯：啊，我的錯誤：您正在尋找沒有JS的解決方案。 嗯，對不起，但可能對您或其他人還是有幫助的。

喬·拉爾夫