引用Chrome中的页内SVG [英] Referencing in-page SVG in Chrome
本文介绍了引用Chrome中的页内SVG的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有人的有趣的问题。我尝试使用以下标记对页面中加载的图片应用SVG过滤器：
Interesting question for someone. I'm trying to apply an SVG filter to an image loaded in the page using the following markup:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
#exampleImage {
filter: url("#grayscale");
}
</style>
</head>
<body>
<img id="exampleImage" src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Bitmap_VS_SVG.svg/300px-Bitmap_VS_SVG.svg.png" />
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>
</body>
</html>
这在Firefox中工作正常 - 图像显示灰度 - 但不是在webkit ）。从我一直在读，这应该工作。你能看到我失踪了吗？
This works fine in Firefox - the image appears grayscale - but not in webkit (Chrome or Safari on Mac). From what I've been reading, this should work. Can you see anything I'm missing?
谢谢！
- Ben
- Ben
推荐答案
以下是您在支持svg过滤器的所有浏览器中使用的示例：
Here's your example made in a way that works in all browsers that support svg filters:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
#exampleImage {
filter: url("#grayscale");
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale" x="0" y="0" width="1" height="1">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
<image id="exampleImage" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Bitmap_VS_SVG.svg/300px-Bitmap_VS_SVG.svg.png" width="100%" height="100%"/>
</svg>
</body>
</html>
Safari开始支持版本6中的过滤器，请参阅所有浏览器的支持表。
Safari started supporting filters in version 6, see table of support for all browsers.
这篇关于引用Chrome中的页内SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
