更新:对于混淆抱歉;一个愚蠢的语法错误(.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和图片请 –