javascript - SVG/CSS 问题，嵌入或引用文件

Question

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

如果我想在建筑物的 svg map 上产生悬停效果，就像这样的 CSS 规则。

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

但是如果 svg 文件非常大 (200kb)，充满了路径向量，而你想改为尊重 svg(见下面的示例)，那么你将违反上述 CSS 规则。 id 以“building”开头的所有路径将停止显示 .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 标签，但我还没有遇到为我将所有内容整合在一起的缺失链接。

重要提示:我知道你可以指定 <style>每个 svg 中的标签，但如果有更好的选择，我宁愿不以这种方式管理我的代码，我相信有更好的选择。这些 svg 将用作 svg map ，具有可触发 map 进出 View 的可点击热点，因此可以选择平面图上的单个建筑物或房间，并将对象 ID 写入表单字段。

Answer 1

之前遇到过这种反射，用 url 引用的 img/svg 文件在 dom 中不是“真实的”，也不是“源代码可编辑的”

没有找到任何使用 css 的有效解决方案。所以，为了“欺骗”这个，我使用了 javascript/jquery。由于引用的文件在 dom 中不是“真正”可编辑的，所以我使用 ajax 来插入它们。这样，页面上的 svg 元素就“真实”存在，并且可以使用 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');
});

这也行得通，添加了类 但只有“通用 css”属性有效。 FILL 不工作，但 OPACITY 工作正常这就是为什么我认为，实际上，svg 动态样式的最佳解决方案是避免引用文件，并使用 javascript/jquery 而不是 css 表来管理它。

所以，对我来说，实际上没有办法在“通过 url 引用”svg 元素上使用 css/样式...除了通过获取图像源代码并将其插入页面来欺骗它。

这是一个快速的 fiddle ，在 HTML 部分，您可以看到我使用的 svg 文件的“简化源代码”、维基百科原始 svg 链接和一个 ID 为“imageTwo”的 div，它将获取 svg 代码... 在 css 部分，您会看到我在示例中使用的类边框样式。 在 js 部分，您会看到变量中的 svg 代码(我没有使用 ajax 但效果是一样的)，以及 rect 元素(它是“ROSE GARDEN”元素)上的事件处理程序。

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

因此，在我自己的问题中，我在必须设置样式的 svg 元素上使用了类属性。在 svg 中使用样式标签来定义“主要元素样式”，并使用 jquery eventHandlers 设置动态样式属性，就像您使用 :hover 所做的那样。

希望这对你有帮助...