造型相同SVG <object>不同的方式

我想用不同的顏色在一個頁面上有一系列相同的SVG文件。我知道將SVG放入頁面而不會膨脹代碼並且仍然具有外部風格的最佳方法是通過<object>標籤。造型相同SVG <object>不同的方式

這是我到目前爲止有：

HTML

<object type="image/svg+xml" data="images/circle.svg" class="object-circle red" > 
    <!-- fallback image in CSS --> 
</object> 

<object type="image/svg+xml" data="images/circle.svg" class="object-circle blue" > 
    <!-- fallback image in CSS --> 
</object>

CSS

.object-circle { 
    height:16px; 
    width:16px; 
} 

.red .svg-circle { 
    fill:#f00; 
} 
.blue .svg-circle { 
    fill:#00f; 
}

SVG

<?xml-stylesheet type="text/css" href="styles.css" ?> 
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"> 
    <defs> 
    <style> 
     .svg-circle { 
     fill-rule: evenodd; 
     } 
    </style> 
    </defs> 
    <path class="svg-circle" d="M200,398.688A199.552,199. ..."/> 
</svg>

這只是不工作。我相信在將<object>標籤定位到CSS中操縱SVG的fill屬性時存在問題。

將.red選擇器關閉樣式表並使.svg-circle選擇器保持原樣 - 將圓圈變爲紅色，但我希望能夠在頁面上使用不同的顏色。

任何幫助非常感謝！

如果我不能破解這個，我可能會訴諸老式的.png精靈表。

來源

2016-01-20 Grimmie

見https://css-tricks.com/using-svg/，部分「使用SVG作爲<object>」：

[...]如果你想的CSS的東西的工作，你無法使用的文檔外部樣式表或<style>，則需要在SVG文件本身內部使用<style>元素。

因此，似乎無法通過CSS從對象的「外部」對object內的SVG元素進行樣式設置。

來源

2016-01-20 14:16:28 CBroe

正如CBroe所說，它是一個樣式化外部對象的問題。你可以通過JS訪問它並改變它，但我懷疑這是理想的，並且存在確保其首先被加載的問題等。

然而，我不相信這是你說的最好的方法，除非有一些其他的要求（例如，沒有javascript或libs，它必須是外部的，你仍然可以通過Snap load方法加載它，例如，如果你支持js的話）。

您可以簡單地使用defs/use語句。我只是爲了簡潔而使用了一個圓圈，但是你可以有一個更復雜的路徑或者其他任何東西。

jsfiddle

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"> 
    <defs> 
    <style> 
     .svg-circle { 
     fill-rule: evenodd; 
     fill: 'red'; 
     } 
    </style> 
    <circle id="myDefsCircle" class="svg-circle" r="20" cx="100" cy="100"/> 
    </defs> 

    <use x="10" y="0" xlink:href="#myDefsCircle" style="fill:red"/> 
    <use x="10" y="50" xlink:href="#myDefsCircle" style="fill:blue"/> 
    <use x="10" y="100" xlink:href="#myDefsCircle" style="fill:green"/> 
</svg>

來源

2016-01-20 14:20:51 Ian

造型相同SVG <object>不同的方式

回答

相關問題