通過CSS選擇外部SVG模板的子元素

在Chrome（不是FF，Safari）中，我無法通過class/ID /元素引用來設置外部鏈接（xlink：href）SVG模板的子元素的樣式。通過CSS選擇外部SVG模板的子元素

我想知道我是否做錯了什麼？有其他人遇到過這個問題嗎？

HTML：

<svg class="my-svg"><use xlink:href="demo.svg#my-icon" /></svg>

demo.svg：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <symbol id="my-icon" viewBox="0 0 21 21"> 
    <title>Mobile Navigation Button</title> 
    <path class="fml" fill="#BADA55" d="M27.493…"/> 
    </symbol> 
</svg>

CSS：

.my-svg { fill: pink; }  /* will work */ 
#my-icon { fill: brown; } /* won’t work in Chrome */ 
.fml { fill: green; }  /* won’t work in Chrome */

我在這裏發表更詳細的演示：

http://monopine.com/svg-demo/

來源

2015-01-20 monopineu

請重新格式化您的問題，以便文本看起來像您的實際代碼。如果您需要幫助格式化文本，請在編輯時單擊文本框旁邊的「幫助」鏈接。 – dg99 2015-01-20 23:29:19

@ dg99正確，謝謝！ – monopineu 2015-01-20 23:31:52

那麼你的問題是什麼？ – 2015-01-21 09:11:10

CSS不適用於文件邊界。因此，HTML中針對外部SVG中的元素的任何CSS都不起作用（或者至少應該不起作用）。因此，規則2和3（#my-icon和.fml）不應起作用。

然而<use>元素的內容可以從其引用者繼承樣式。所以他們應該繼承粉色填充.my-svg

來源

2015-01-22 01:54:23

感謝您的澄清。 FF和Safari支持以shadow/dom/external 作用域中的元素爲目標的能力，這很奇怪。 – monopineu 2015-01-23 08:40:20

通過CSS選擇外部SVG模板的子元素

回答

相關問題