Question

更新：抱歉混乱;一个愚蠢的语法错误（.target）而不是（：target）引起了我的问题和困惑。使用：target all按预期工作。

我在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打开页面，我仍然会看到红色矩形。我希望有一个蓝色的。

Answer 1

如果你可以使用一些jQuery，我会这样做。

＆＃13;

    create table  #tmp (MR_ID varchar(50),DR_ID int)
insert into  #tmp VALUES
('MR_123', 1),('MR_123', 3),('MR_124', 4),('MR_124', 5)
,('MR_124', 6),('MR_125', 0)

 declare @DRCol varchar(50)
 declare @Prefix varchar(20)='DR_'
 ;With CTE as
 (
select *
,ROW_NUMBER()over(partition by MR_ID order by DR_ID)rn
 from #tmp
 )

 select top 1 
@DRCol=stuff((select ','+'['+@Prefix+cast(rn as varchar)+']' 
 from cte c1 where c.mr_id=c1.mr_id for xml path('')),1,1,'')
 from cte c
 where c.mr_id=(select top 1 mr_id from cte c1 order by rn desc)


 declare @Sql varchar(2000)=''

 set @Sql='   SELECT p.*
FROM
(
  SELECT *
          ,'''+@Prefix+'''+ cast(ROW_NUMBER() OVER(PARTITION BY MR_ID ORDER BY DR_ID) as varchar(max))  columnName
    FROM #tmp AS m
    ) AS t
PIVOT(MAX(DR_ID) FOR columnName IN('+@DRCol+')) AS p'
print @sql
exec(@sql)
drop table #tmp

＆＃13;

// 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");
});

＆＃13;

.highlight {
  fill: #00ff00;
  color: red;
}

.clearHighlight {
  fill: #FFFFFF;
}

＆＃13;

Answer 2

你的svg标签中没有类（目标），你必须纠正你的CSS选择器

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

Answer 3

以下是CSS中目标的正确语法：

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

CSS .target属性指向svg元素

3 个答案: