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

Question

• 我有一个svg文件。我通过<object data = "img/img.svg" type = "image/svg + xml">...添加
• Svg文件包含属性为"fill"的标记"path"
• 此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的内容并设置填充属性）

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并注入DOM:

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

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

内联svg的浏览器支持非常好：http://caniuse.com/#feat=svg-html5

编辑：啊，我的错误：你正在寻找一个没有JS的解决方案。嗯，很抱歉，但也许这对你或其他人仍然有帮助。

CiaoRalf