我从各种来源收集到 svg 中的 vector-effect="non-scaling-stroke"应该适用于当前版本的 Opera、Firefox 和 Chrome。 (不确定 IE10)。
但是我只能让它在Opera和Firefox中工作,然后只有当它直接嵌入为图像时,如果它在CSS中缩放为背景图像则不起作用。
我的问题:
为什么不用 chrome?
为什么不在背景图片中?
是否有一种标准方法可以让我在所有最新的浏览器中使用它?
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(不确定背景)。变化:
<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'));
});
}
现在代替 <img src="svg.svg"/>
我可以写<div class="deferred-load" data-load="svg.svg"></div>
.
当然,如果没有启用 Javascript,这是行不通的。但这比粘贴所有丑陋的 XML 要好得多。
关于css svg 和矢量效果 ="non-scaling-stroke"浏览器兼容性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15703266/