Question

我试图通过CSS操作外部.svg文件。

HTML

<body>
    <div class="mysvg">
    <img src="decho.svg" alt="decho" width="200px"></img>
    </div>
</body>

CSS

div.mysvg img {
    opacity: .3;
    transition: opacity 1s linear 0s;
}
    div.mysvg img:hover {
    opacity: 1;
}

此代码适用于不透明度，但不适用于fill或其他svg特定属性，例如stroke。我知道我不能使用img代码执行此操作，但我一直在寻找好几个小时，但我找不到使用svg或object执行此操作的正确方法

所以基本上，我的问题是，如何获得与我链接的代码相同的结果，但是能够操作填充，描边等属性，它必须是外部文件 ，而不仅仅是粘贴在html中的内联svg代码。

如果有人能够告诉我正确的方法，我会非常感激。感谢。

修改

我设法通过在.svg文件中添加一个css来实现。它必须在svg开头标记之后。

<svg ...>
<style type="text/css" media="screen">  
    <![CDATA[  
    g {  
        fill: yellow;  
        stroke: black;  
        stroke-width: 1;
        transition: fill 1s linear 0s;
    }
    g:hover {
        fill: blue;
    }
    ]]>  
</style> 
<g>
    <path ...>
</g>
</svg>

您还需要在html中将其作为object插入，否则无效。

<object data="decho.svg" type="image/svg+xml">

希望这有助于寻找未来像我一样的答案的人。这对我有帮助http://www.hongkiat.com/blog/scalable-vector-graphic-css-styling/。

Answer 1

在我看来，这是svg中最大的缺陷：沙盒。

在他们自己的文档中

svg文件是沙箱，这就是典型的'fill：'样式不适用的原因。同样，您在svg中编写的CSS也不会适用于您网站的其他部分。

直接将css添加到svg：这不是一个好的解决方案，因为你最终会在你使用的每个svg中重写css。

真正的解决方案：“图标系统”。 Svg font-face或svg sprites。详细了解他们here。

不透明度起作用的原因：不透明度适用于svg对象/帧本身，而不是svg的内容（无法访问）。

我还应该注意，无论你如何加载这些svg，内联，引用，作为背景的对象，你都无法进入沙箱。这就是为什么将它们转换为字体或使用精灵对于使用悬停，聚焦和其他效果/过渡是必要的。

Answer 2

如果SVG没有自己定义的填充颜色，并且CSS中没有父选择器，则可以这样做。例如：

我有以下文件：

icon-sprite.svg（我的SVG外部精灵）
buttons.scss
的test.html

图标-sprite.svg

为清楚起见，我省略了其他SVG。

<svg xmlns="http://www.w3.org/2000/svg" style="width:0;height:0;visibility:hidden;"> <symbol viewBox="0 0 1500 828" id="icon-arrow-3pt-down"> <title>arrow-3pt-down</title> <path d="M1500 0H0l738.9 827.7z"/> </symbol> </svg>

<强>的test.html

<button class="button--large"> Large button <svg class="svg" width="20px" height="20px"> <use xlink:href="icon-sprite.svg#icon-arrow-3pt-down"></use> </svg> </button>

<强> buttons.scss

.svg { fill: red; }

如果由于影子DOM边界而使用body .svg，这将不。

请参阅this CSS Tricks article for more info

使用CSS操作外部svg文件样式属性

2 个答案: