更新:对于混淆抱歉; 一个愚蠢的语法错误(.target)而不是(:target)导致我的问题和困惑。 随着:按预期瞄准所有作品。
我在page.html中有一个内联svg,我想用外部样式表进行修改。 让我们假设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打开页面,我仍然会看到红色矩形。 我本来希望有一个蓝色的。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
<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:
#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 :
<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. 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.最满意答案
以下是CSS中目标的正确语法:
#DA:target {fill:blue !important;}Here is the right syntax of target in CSS :
#DA:target {fill:blue !important;}更多推荐
target,page,svg,电脑培训,计算机培训,IT培训"/> <meta name="description&q
发布评论