javascript - 如何从 CSS 访问 SVG 文件中的元素？

Question

• 我有一个 svg 文件。我通过 <object data = "img/img.svg" type = "image/svg + xml">... 添加它
• Svg 文件包含标签 "path"具有属性 "fill" .
• 这个svg文件需要多次使用，并且为"fill"使用不同的颜色.有必要像div.red #pathId {fill: red}和 div.green #pathId {fill: green}
• css 属性不适用于此 svg 文件，因为在页面上它类似于 iframe 方式，并且 => css 不适用。
• 我知道我们可以在SVG文件中指定CSS文件的路径。但是此 CSS 文件的所有样式仅用于 SVG 文件。 (.red 和 .green 在 SVG 中不可用并且 => 它不适用)

有没有不使用JS的解决方案？(用JS我们可以通过.contentDocument获取SVG的内容，并设置fill属性)

Answer 1

只有当 SVG 是 HTML-DOM 的一个元素时，您才能访问 SVG，如下所示:

<div class="svg">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="566.93px" height="1133.858px" viewBox="0 0 566.93 1133.858" enable-background="new 0 0 566.93 1133.858" xml:space="preserve">...</svg>
</div>

这是我的一个元素中的 html 片段。在全局 css 中有一些基本的样式:

.svg {
  height: 400px;
  width: 400px;
}

svg {
  height: 100%;
  width: 100%;
}

为了包含 SVG，我使用以下机制:

HTML:

<div class="svg" data-svgpath="img/img.svg"></div>

JS:

function loadSvg(container) {
    if (container.dataset.svgpath) {
        $(container).load(container.dataset.svgpath, function(resp, status, xhr) {
            container.classList.add('is-loaded');
        });
    }
}

加载 SVG 并注入(inject) DOM:

$('.svg').each(function() {
    loadSvg(this);
});

这是对我在元素中所做工作的简短总结，它就像一个魅力。我可以通过全局 css 和 js 进行访问，因为我也在 SVG 中操纵组的可见性。

浏览器对内联svg的支持相当好:http://caniuse.com/#feat=svg-html5

编辑:啊，我的错误:您正在寻找没有 JS 的解决方案。嗯，抱歉，但它可能对您或其他人仍然有帮助。

再见拉尔夫