無法使用屬性選擇器來定位xlink：href

我試圖避免在設計我的SVG時僅通過定位xlink:href屬性的值來設置<use class="myicon" xlink:href="myicon" />。下面的選擇似乎都不工作：無法使用屬性選擇器來定位xlink：href

[xlink|href*=myicon], // I also set the namespace at the top of the file 
[xlink:href*=myicon], 
[xlink\:href*=myicon] { 
    color: yellow !important; 
}

幾個網站上的其他問題，似乎意味着使用的命名空間屬性的屬性選擇應該是可能的造型，即使普通的HTML有命名空間屬性的支持，因爲它應該把它們看作一個詞。但我無法實現它，所以我對此失去信心。

來源

2017-02-15 oligofren

你是絕對正確的軌道，你在做什麼上。其實，你有正確的答案：

[xlink\:href*=myicon] { 
    color: yellow !important; 
}

它不工作的原因是因爲你嘗試的第一個兩個選擇分別爲無效（|和:字符需要轉義），並且如果CSS選擇器包含無效字符，整個選擇器組會被丟棄。

檢查這個例子證明... div（爲了簡單起見，只是使用div，儘管這不太正確）應該被設置爲紅色，因爲該規則在藍色之後，但因爲選擇器組被拋出，該規則將不會被應用。另一個沒有無效字符的選擇器將適用於！

[xlink\:href*=myicon] { 
 
    color: blue; 
 
} 
 

 
[xlink|href*=myicon], 
 
[xlink:href*=myicon], 
 
[xlink\:href*=myicon] { 
 
    color: red; 
 
}

<div xlink:href="myicon">Lorem Ipsum</div>

來源

2017-02-16 02:10:24

「它不工作的原因是因爲您嘗試的前兩個選擇器無效（|和：字符都需要轉義）「The |是完全有效的，不需要逃脫 - 他完全按照預期使用它。而[xlink \：href * = myicon] *作品*，SVG純粹主義者會告訴你，它不是正確的答案（原因在我之前的句子中給出）。 – BoltClock

對我的錯誤感到滿意;我的知識缺乏'@ namespace'的使用......但值得注意的是，如果正確的命名空間不包含在內，那麼在選擇器中使用'|'仍然會導致整個選擇器組失效！ –

至於布雷克Mann說，如果你列出你所有的選擇在一起，就像是，它不會工作，因爲[xlink:href*=myicon]是無效的，這會導致整個規則集被丟棄。如果您嘗試不同的選擇器，則需要一次嘗試一個。

[xlink|href*=myicon]作品就好了，但要確保你所指定XLink命名空間和不 SVG的命名空間：

@namespace xlink 'http://www.w3.org/1999/xlink'; 
 

 
html { 
 
    background-color: black; 
 
} 
 

 
[xlink|href*=myicon] { 
 
    fill: yellow; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <defs> 
 
    <text id="myicon" y="16">Icon</text> 
 
    </defs> 
 
    <use xlink:href="#myicon" /> 
 
</svg>

來源

2017-02-17 03:29:34 BoltClock

無法使用屬性選擇器來定位xlink：href

回答

相關問題