堆栈内存溢出
  简体   繁体   English

指向svg元素的CSS .target属性

[英]CSS .target attribute pointing to svg element

 原文  2017-04-27 08:08:57  4   3    html/ css/ svg

问题描述

Update: Sorry for the confusion; 更新：很抱歉造成混乱； a silly grammar error (.target) instead of (:target) caused my problem and confusion. 一个愚蠢的语法错误（.target）而不是（：target）引起了我的问题和困惑。 With :target all works as expected. 使用：target可以正常工作。

I have an inline svg in page.html that I want to modify with an external stylesheet. 我在page.html中有一个内联svg，我想使用外部样式表进行修改。 Let us assume the svg just consists of 让我们假设svg只是由 

<svg>
  <rect id="DA" 
    style="stroke-width:0.75;fill:#0000FF;"
    width="50" height="50" x="10" y="10">
  </rect>
</svg>

The following line in the css file fills the rectangle as expected: css文件中的以下行按预期填充了矩形： 

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

However, I would like the rectangle to be filled only if I open the page as page.html#DA . 但是，我只希望将页面作为page.html#DA打开时才填充矩形。 I would have hoped that 我本来希望 

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

should do the trick; 应该做到这一点； however the line doesn't seem to be applied, even if the page is loaded as page.html#DA . 但是，即使将页面加载为page.html#DA ，也似乎未应用该行。

Question : How can I make css attributes apply to svg elements depending on the target link? 问题 ：如何根据目标链接将css属性应用于svg元素？

Context : I would like to provide an svg floorplan, where you can click on a link in the address book entry of a person to get to the floorplan with the corresponding room highlighted (without creating a different webpage for each room). 上下文 ：我想提供一个svg平面图，您可以在其中单击某人的地址簿条目中的链接，以突出显示对应房间的平面图（而不为每个房间创建不同的网页）。

Update : As (probably?) requested in a comment, here is the complete example. 更新 ：根据评论（可能是？）的要求，这里是完整的示例。 The following is the file page.html : 以下是文件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>

The output is as follows: 输出如下：

  • When I open page.html I get a red rectangle, as expected. 当我打开page.html ，如预期的那样，我得到一个红色矩形。
  • When I delete .target from the code, I get a blue one, as expected. 当我从代码中删除.target ，如预期的那样，我得到一个蓝色的。
  • But with the .target in place, I still get the red rectangle even if I open the page as page.html#DA . 但是，有了.target ，即使将页面作为page.html#DA打开，我仍然会得到红色矩形。 I would have hoped for a blue one. 我本来希望有一个蓝色的。

3 个解决方案

解决方案1
 0  2017-04-27 08:59:21

This is how I would do it if you are ok with using some jQuery. 如果您可以使用一些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" 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>

解决方案2
 0  2017-04-27 08:59:37

There is no class(target) in your svg tag, you have to correct your CSS selector svg标记中没有类（目标），您必须更正CSS选择器 

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

解决方案3
 0 已采纳  2017-04-27 08:59:56

这是CSS中target的正确语法： 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 CSS中具有特定属性的目标元素 - Target element with specific attribute in css CSS - 响应式指向元素 - CSS - responsive pointing at element 如何使用特定的css属性（CSS Only Solution）定位元素？ - How to target an element with specific css attribute (CSS Only Solution)? CSS：定位一个“ <a>”标签元素</a> - CSS : target an "<a>" tag element 通过指定属性而不是元素类型来选择svg文件中受CSS影响的元素 - Choose element affected by css in svg file by specifying an attribute instead of an element type 目标属性在 css 上无法正常工作 - target attribute not working properly on css 以数据属性为目标的 CSS 选择器 - CSS Selector to target Data attribute CSS检查状态-处于选定状态的目标svg - CSS check state - target svg in selected state css 中 svg 图像的动画元素 - Animate element of svg image in css 动画a <g> SVG中的CSS元素 - Animate a <g> element in SVG with CSS
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM