2017-04-27 109 views
0

更新:對於混淆抱歉;一個愚蠢的語法錯誤(.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,我仍然會看到紅色矩形。我本來希望有一個藍色的。
+0

請提供你想要的SVG和圖片請 –

回答

0

這裏是目標的CSS正確的語法:

#DA:target {fill:blue !important;} 
0

這是我會怎麼做,如果你都OK使用一些jQuery的。

// ADD CLASS 
 
$(".roomList").on("mouseenter",function(){ 
 
    var id = $(this).attr("data-id"); 
 
    $("#"+id).attr("class", "highlight"); 
 
}); 
 

 
// REMOVE CLASS 
 
$(".roomList").on("mouseout",function(){ 
 
    var id = $(this).attr("data-id"); 
 
    $("#"+id).attr("class", "highlight clearHighlight"); 
 
});
.highlight { 
 
    fill: #00ff00; 
 
    color: red; 
 
} 
 

 
.clearHighlight { 
 
    fill: #FFFFFF; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<?xml version="1.0" encoding="utf-8"?> 
 
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) --> 
 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
 
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" 
 
\t y="0px" width="280px" height="184px" viewBox="0 0 280 184" enable-background="new 0 0 280 184" xml:space="preserve"> 
 
<rect x="31.833" y="26.885" fill="#FFFFFF" stroke="#000000" width="230.334" height="129.115"/> 
 
<rect id="roomA" x="39.803" y="33.261" fill="#FFFFFF" stroke="#000000" width="44.632" height="37.459"/> 
 
<rect id="roomB" x="91.608" y="33.261" fill="#FFFFFF" stroke="#000000" width="44.632" height="37.459"/> 
 
<rect id="roomC" x="145.406" y="33.261" fill="#FFFFFF" stroke="#000000" width="44.632" height="37.459"/> 
 
<rect id="roomD" x="198.806" y="33.261" fill="#FFFFFF" stroke="#000000" width="44.632" height="37.459"/> 
 
<rect id="roomE" x="39.803" y="106.984" fill="#FFFFFF" stroke="#000000" width="44.632" height="37.459"/> 
 
<rect id="roomF" x="91.608" y="106.984" fill="#FFFFFF" stroke="#000000" width="44.632" height="37.459"/> 
 
<rect id="roomG" x="145.406" y="106.984" fill="#FFFFFF" stroke="#000000" width="44.632" height="37.459"/> 
 
<rect id="roomH" x="198.806" y="106.984" fill="#FFFFFF" stroke="#000000" width="44.632" height="37.459"/> 
 
<text transform="matrix(1 0 0 1 58.9814 54.6021)" font-family="'KozGoPro-Regular-90ms-RKSJ-H'" font-size="9.5641">A</text> 
 
<text transform="matrix(1 0 0 1 110.7866 54.6021)" font-family="'KozGoPro-Regular-90ms-RKSJ-H'" font-size="9.5641">B</text> 
 
<text transform="matrix(1 0 0 1 166.3115 54.6021)" font-family="'KozGoPro-Regular-90ms-RKSJ-H'" font-size="9.5641">C</text> 
 
<text transform="matrix(1 0 0 1 219.1797 54.6021)" font-family="'KozGoPro-Regular-90ms-RKSJ-H'" font-size="9.5641">D</text> 
 
<text transform="matrix(1 0 0 1 58.9814 129.2549)" font-family="'KozGoPro-Regular-90ms-RKSJ-H'" font-size="9.5641">E</text> 
 
<text transform="matrix(1 0 0 1 110.7866 129.2549)" font-family="'KozGoPro-Regular-90ms-RKSJ-H'" font-size="9.5641">F</text> 
 
<text transform="matrix(1 0 0 1 166.3115 129.2549)" font-family="'KozGoPro-Regular-90ms-RKSJ-H'" font-size="9.5641">G</text> 
 
<text transform="matrix(1 0 0 1 217.5859 129.2549)" font-family="'KozGoPro-Regular-90ms-RKSJ-H'" font-size="9.5641">H</text> 
 
<text transform="matrix(1 0 0 1 33.1611 23.9634)" font-family="'KozGoPro-Regular-90ms-RKSJ-H'" font-size="9.5641">FloorPlan</text> 
 
</svg> 
 

 
<br> 
 
<span id="room1" data-id="roomA" class='roomList'>RoomA</span><br> 
 
<span id="room2" data-id="roomB" class='roomList'>RoomB</span><br> 
 
<span id="room3" data-id="roomC" class='roomList'>RoomC</span><br> 
 
<span id="room4" data-id="roomD" class='roomList'>RoomD</span><br> 
 
<span id="room5" data-id="roomE" class='roomList'>RoomE</span><br> 
 
<span id="room6" data-id="roomF" class='roomList'>RoomF</span><br> 
 
<span id="room7" data-id="roomG" class='roomList'>RoomG</span><br> 
 
<span id="room8" data-id="roomH" class='roomList'>RoomH</span><br> 
 
<span id="room9" data-id="roomI" class='roomList'>RoomI</span><br>

0

沒有課(目標)在你的SVG標籤,你必須糾正你的CSS選擇器

#DA:target { 
    fill:#00FFFF !important; 
}