2017-04-27 111 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; 
}