Question

在阅读了几篇关于为什么您可能希望使用<img>或<object>标记来引用svg文件的堆栈帖子后，我还没有找到一个能够回答我所拥有的特定问题的帖子关于CSS和svg <path>标签。如果将svg嵌入到js或html中，则可以管理所有悬停事件，例如，在CSS规则中

如果我想在svg建筑物地图上有悬停效果的CSS规则。

path[id^="building"]:hover {
    opacity: 0.5;
}

但是如果svg文件非常大（200kb），充满了路径向量，而你想要反而尊重svg（参见下面的示例），那么你将打破上面的CSS规则。 id为＆＃34; building＆＃34;的所有路径将停止显示.5不透明度的悬停效果。

<object type="image/svg+xml" data="http://localhost:49031/my.svg" `width="300" height="300"></object>`'

或者

<img id="map" src="http://localhost:49031/my.svg"></img>

我似乎无法绕过参考svg文件内部路径的方式。我已经开始阅读<use>和<g> svg标签了，但我没有遇到过将这一切全部拉到一起的缺失链接。

重要提示：我意识到您可以在每个svg中指定<style>个标签，但如果有更好的选择，我宁愿不以这种方式管理我的代码，我确信这样做。这些svgs将用作svg地图，其中可点击的热点可以触发视图进出视图，因此可以选择单独的建筑物或平面图上的房间，并将对象id写入表单字段。

Answer 1

之前面对这种反思，用url引用的img / svg文件不是＆＃34;真的＆＃34;在dom中并且不是＆＃34;源可编辑＆＃34;

没有找到任何使用css的工作解决方案。所以，对'＆＃34;技巧＆＃34;这个，我使用了javascript / jquery。由于引用的文件不是＆＃34;真的＆＃34;在dom中可编辑，我用ajax插入它们。这样，svg项目就是＆＃34;真的＆＃34;在页面和CSS可以使用。

例如，您从请求中获取svg源代码，并将其放入div中，您可以使用以下内容：

<div id="image">
    <svg xmlns:svg="http://www.w3.org/2000/svg" version="1.0" width="830.69293" height="275.62558" id="svg2">
    //SVG ITEMS
    </svg>
</div>

在这个例子中，我使用了一个svg文件：https://upload.wikimedia.org/wikipedia/commons/5/57/WHComplex.svg（我从svg文件中删除了无用的标签，只使用了svg文件）

然后，我使用jQuery事件处理程序在svg项目上设置样式，这样：

$('body').on('click','#rect2384',function(){
    //THIS IS WORKING 
    $(this).css('fill','red');
    $(this).css('opacity','0.2');
});

现在，如果你使用css样式，就像这样：

//CSS : 
<style>
    .border{
        fill:red;
        opacity:0.2;
    }
</style>

//JS/JQuery
$('body').on('click','#rect2384',function(){
    $(this).toggleClass('border');
});

这是工作太多了，课程被添加但仅＃34;常见的css＆＃34;属性正在起作用。填充不起作用，但OPACITY工作正常这就是为什么我认为，实际上，svg动态样式的最佳解决方案是避免引用文件，并使用javascript / jquery而不是css表来管理它。

所以，对我而言，实际上没有办法在网址上使用css /样式。 svg items ...除了通过获取图像源代码并将其插入页面来欺骗它。

这是一个快速的小提琴，在HTML部分你可以看到＆＃34;简化的源代码＆＃34;我使用的svg文件，wikipedia原始的svg链接，以及id为＃34; imageTwo＆＃34;的div。这将得到svg代码...... 在css部分中，您可以看到我在示例中使用的类边框样式。在js部分，你看到svg代码（我在没有ajax的情况下做了但效果是相同的）在变量中，而在rect项目上是eventhandler（它是＆＃34; ROSE GARDEN＆＃34;项目）。

http://jsfiddle.net/pe24t8Lk/1/

所以，在我自己的问题中，我在svg项目上使用了class属性。在svg中使用的样式标签来定义＆＃34;主要项目样式＆＃34;并使用jquery eventHandlers来设置动态样式属性，就像你一样：hover。

希望这会对你有帮助......

Answer 2

如@ Julo0s的回答所述，外部引用的SVG的内容不包含在DOM中。如果以编程方式为SVG设置样式并且内联不是，则可以使用jQuery动态内联SVG的内容。以下SO帖子将引导您完成它。

This SO post walks you through it.

This CodePen shows a modified implementation of it in action.它实现如下：

HTML

<img src="some-svg.svg" class="svg">

JS

inlineSvgElements();

CSS

.select-all-the-svg-elements {
}

SVG / CSS很难，嵌入或引用该文件

2 个答案: