指向svg元素的CSS .target属性(CSS .target attribute pointing to svg element)

编程入门行业动态更新时间:2024-10-25 20:24:04

更新：对于混淆抱歉; 一个愚蠢的语法错误（.target）而不是（：target）导致我的问题和困惑。随着：按预期瞄准所有作品。

我在page.html中有一个内联svg，我想用外部样式表进行修改。让我们假设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打开页面，我仍然会看到红色矩形。我本来希望有一个蓝色的。

Update: Sorry for the confusion; a silly grammar error (.target) instead of (:target) caused my problem and confusion. With :target all works as expected.

I have an inline svg in page.html that I want to modify with an external stylesheet. Let us assume the svg just consists of

The following line in the css file fills the rectangle as expected:

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

However, I would like the rectangle to be filled only if I open the page as 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.

Question: How can I make css attributes apply to svg elements depending on the target link?

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).

Update: As (probably?) requested in a comment, here is the complete example. The following is the file page.html :

The output is as follows:

When I open page.html I get a red rectangle, as expected. When I delete .target from the code, I get a blue one, as expected. But with the .target in place, I still get the red rectangle even if I open the page as page.html#DA. I would have hoped for a blue one.