Question

从各种来源我收集到svg中的vector-effect =“non-scaling-stroke”应该适用于当前版本的Opera，Firefox和Chrome。（不确定IE10）。

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

我的问题：

为什么不镀铬？

为什么不在背景图片中？

我是否有一种标准方式可以在所有最新浏览器中使用它？

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;        
}

Answer 1

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

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

为：

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

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

根据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'));
    });
}

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

当然，如果没有启用Javascript，这不起作用。但它比粘贴所有丑陋的XML更好。

Answer 2

引擎盖UAs需要绘制SVG，然后将其转换为位图以创建图像（包括背景图像）。最简单的方法是绘制它是重用非图像渲染代码然后缩放位图但是当缩放位图时它变得模糊并且也不能正确地渲染非缩放笔划。正确的方法是找出你最终想要绘制位图的大小，并告诉SVG绘图代码绘制它。

此bug刚刚在Firefox中得到修复。您今天可以尝试Nightly或等待9月份的发布。

css svg和vector-effect =“非缩放中风”浏览器兼容性

2 个答案: