SVG/CSS 问题，嵌入或引用文件答案

【问题标题】：SVG/CSS woes, to embed or reference the fileSVG/CSS 问题，嵌入或引用文件
【发布时间】：2017-05-24 10:46:13
【问题描述】：

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

如果我想在建筑物的 svg 地图上产生悬停效果，可以使用这样的 CSS 规则。

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

但是，如果 svg 文件非常大（200kb），充满了路径向量，而您想要尊重 svg（参见下面的示例），那么您将违反上述 CSS 规则。所有 id 以“building”开头的路径都将停止显示 0.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> 标签，但如果有更好的选择，我宁愿不以这种方式管理我的代码，我确信有。这些 svg 将用作 svg 地图，带有可点击的热点，可触发地图进出视图，因此可以选择平面图上的单个建筑物或房间，并将对象 ID 写入表单字段。

【问题讨论】：

以下是我参考的一些问题：stackoverflow.com/questions/12583879/…stackoverflow.com/questions/18434094/…
而且我怀疑如果你检查了这些问题中的大多数，答案就会回来......“你不能”用 CSS 引用链接的 SVG 中的子元素......*然而*。那里提到了几种解决方法，但在您的情况下它们可能无法扩展。
@Paulie_D 是的，你是对的，就像我说的那样，我希望有一个我还没有看到的选项，它确实适用于传统的 CSS 样式功能。我可能只需要单独设置每个 svg 的样式并相应地进行管理。
你能在一个不起作用的小提琴上弹出 svg 示例吗？
好吧，既然 fiddle 不允许你引用本地文件，我必须将 svg 嵌入到 js 或 html 中，在这种情况下，css 可以完美地工作，因为它可以访问子元素.我不确定我是否可以访问使用 svg 的 img 托管站点，所以同样的 jsFiddle 问题，除非我误认为 javascript/浏览器使用本地文件是不可以的。

标签： javascript jquery html css svg

【解决方案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/样式...除了通过获取图像源代码并将其插入页面来欺骗这一点。

这是一个快速的小提琴，在 HTML 部分你可以看到我使用的 svg 文件的“简化源代码”，维基百科原始 svg 链接，以及一个 id 为“imageTwo”的 div，它将获得 svg 代码...... 在 css 部分中，您会看到我在示例中使用的类边框样式。在 js 部分中，您可以在变量中看到 svg 代码（我没有使用 ajax，但效果相同），以及 rect 项（它是“ROSE GARDEN”项）上的事件处理程序。

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

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

希望对你有所帮助...

【讨论】：

是的，这与我现在使用的方法相同，将 svg 放入带有 JS 的 DOM 中。我可能不得不放弃查看我拥有的所有大 svg 文件而感到痛苦，并习惯于在 Visual Studio 中查看它，而不是以实际加载到 DOM 的形式或通过 F12 看到的形式.我很欣赏您制定方法所花费的时间。虽然这不是我希望的答案，但我确实从你的技术中学到了一些东西。
@Dogbyte 对不起，我不能给你你希望的答案。 Svg 文件比您可以使用的任何其他类型的矢量图像文件都要小。这就是为什么 IMO 将 svg 文件直接包含在网页中不是问题的原因。我使用的最大文件大多在 500Ko 以下，如今，加载到网页中的 500Ko 文件不再是问题……现在另一个想法：使用 iframe 来显示 svg 而不是 img 标签怎么样？代码可以进入 iframe 容器...祝你好运 ;)

【解决方案2】：

正如@Julo0sS 的回答中所述，外部引用的 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">

inlineSvgElements();

CSS

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

【讨论】：