更新:對於混淆抱歉;一個愚蠢的語法錯誤(.target)而不是(:target)導致我的問題和困惑。隨着:瞄準所有預期的作品。CSS .target屬性指向svg元素
我有一個inline svg在page.html
,我想修改一個外部樣式表。 讓我們假設SVG只是由
<svg>
<rect id="DA"
style="stroke-width:0.75;fill:#0000FF;"
width="50" height="50" x="10" y="10">
</rect>
</svg>
在CSS文件中的以下行充滿預期的矩形:
#DA {fill:#00FFFF !important; }
不過,我想矩形只有當我打開填充頁面爲page.html#DA
。我本來希望
#DA.target {fill:#00FFFF !important; }
應該做的伎倆;但是該行似乎不適用,即使頁面加載爲page.html#DA
。
問題:如何根據目標鏈接使css屬性適用於svg元素?
語境:我想提供一個SVG平面佈置圖,在那裏你可以點擊一個人的地址簿條目的鏈接去與對應的房間強調了佈局規劃(不創建爲每個不同的網頁房間)。
更新: 作爲(可能?)在評論中請求,這裏是完整的例子。以下是文件page.html
:
<html>
<head>
<style type="text/css">#DA.target {fill:blue !important; }</style>
</head>
<body>
<svg>
<rect id="DA"
style="stroke-width:0.75;fill:red;"
width="50" height="50" x="10" y="10">
</rect>
</svg>
</body>
</html>
輸出如下:
- 當我打開
page.html
我得到一個紅色矩形,符合市場預期。 - 當我從代碼中刪除
.target
時,我得到一個藍色的,如預期的那樣。 - 但與
.target
適當的地方,即使我打開頁面爲page.html#DA
,我仍然會看到紅色矩形。我本來希望有一個藍色的。
請提供你想要的SVG和圖片請 –