css svg 和 vector-effect="non-scaling-stroke" 浏览器兼容性答案

【问题标题】：css svg and vector-effect="non-scaling-stroke" browser compatibilitycss svg 和 vector-effect="non-scaling-stroke" 浏览器兼容性
【发布时间】：2013-03-20 03:44:24
【问题描述】：

我从各种来源收集到 svg 中的 vector-effect="non-scaling-stroke" 应该在当前版本的 Opera、Firefox 和 Chrome 中工作。（不确定 IE10）。

但是我只能让它在 Opera 和 Firefox 中工作，然后只有当它直接嵌入为图像时，如果它在 CSS 中缩放为背景图像，则它不起作用。

我的问题：

为什么不镀铬？

为什么不在背景图片中？

我可以在所有最新的浏览器中使用它吗？

A fiddle example.

HTML：

<div><img src="http://dl.dropbox.com/u/60476509/close.svg" /></div>
<div><img id="one" src="http://dl.dropbox.com/u/60476509/close.svg" /></div>
<div id="two"></div>
<div id="three"></div>

CSS：

#one {
    width: 200px;
    height: 200px;
}

#two {
    background-image: url("http://dl.dropbox.com/u/60476509/close.svg");
    height: 100px;   /* native size */
    width: 100px;
    background-size: contain;        
}
#three {
    background-image: url("http://dl.dropbox.com/u/60476509/close.svg");
    height: 200px;
    width: 200px;
    background-size: cover;        
}

【问题讨论】：

如果您将 SVG 内联放置在 Chrome 中：jsfiddle.net/42mq6，但不确定如何解决您的问题。
@Duopixel 谢谢，这是一个改进，即使很麻烦。

标签： css svg

【解决方案1】：

我不知道幕后发生了什么，但有一个更简单的解决方案，至少对于内联 SVG（不确定背景）。变化：

<img src="svg-source.svg"/>

到：

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

此外，您需要确保您有viewBox defined 用于 svg 文档。

根据this answer，无论如何使用object 是更好的做法。 Here 是一篇不错的博文，推荐（为了跨浏览器兼容性）：

<object type="image/svg+xml" data="svg-source.svg">
    <img src="png-version.png"/>
</object>

我没有测试后一个选项，但如果它有效，它比this 解决方案简单得多。

编辑：我发现作为嵌入式对象，SVG 会干扰“悬停”和“点击”事件，所以我最终屈服并决定必须完全嵌入 SVG。但我对粘贴每一个都没有兴趣，所以我的 javascript 文件顶部有以下内容（我使用的是 JQuery）：

$(document).ready(function()
{
    $('.deferred-load').deferredLoad();
}
$.fn.deferredLoad = function()
{
    $(this).each(function()
    {
        $(this).load($(this).attr('data-load'));
    });
}

现在我可以写<div class="deferred-load" data-load="svg.svg"></div>，而不是<img src="svg.svg"/>。

当然，如果没有启用 Javascript，这是行不通的。但这比粘贴所有丑陋的 XML 要好得多。

【讨论】：

【解决方案2】：

在幕后，UA 需要绘制 SVG，然后将其转换为位图以创建图像（包括背景图像）。最简单的绘制方法是重用非图像渲染代码，然后缩放位图，但是当缩放位图时，它会变得模糊并且也不能正确渲染非缩放笔画。正确的方法是弄清楚你最终想要绘制位图的大小，并告诉 SVG 绘图代码在其中进行绘制。

这个bug 刚刚在 Firefox 中得到修复。您可以立即尝试Nightly 或等待 9 月发布。

【讨论】：