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方式，并且=＆gt; css不适用。
我知道我们可以在SVG文件中指定CSS文件的路径。但是此CSS文件的所有样式仅用于SVG文件。（.red和.green在SVG中不可用，并且=＆gt;它不适用）

有没有使用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并注入DOM：

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

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

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

编辑：啊，我的错误：你正在寻找没有JS的解决方案。嗯，对不起，但它可能对你或其他人有帮助。

侨拉尔夫

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

1 个答案: