css - 在 Chrome 中引用页内 SVG

标签 css html svg

某人的有趣问题。我正在尝试使用以下标记将 SVG 过滤器应用于页面中加载的图像:

<!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(Mac 上的 Chrome 或 Safari)中则不然。从我一直在阅读的内容来看,这应该有效。你能看到我遗漏的任何东西吗?

谢谢!

最佳答案

这是您以一种在所有支持 svg 过滤器的浏览器中工作的方式制作的示例:

<!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 中开始支持过滤器,请参阅 table of support适用于所有浏览器。

关于css - 在 Chrome 中引用页内 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13695176/

相关文章:

html - 如何在 SVG 路径创建中使用变量?

html - 构建圆形百分比图表

javascript数组长度为1

html - 使 Bootstrap 3 nav pills 占据网格中定义的空间

html - 通过 LESS 和 CSS 动态(在运行时)更改变量?

html - HTML5 表单验证真的可以访问吗?

css - 单击 SVG 元素时应用 CSS 样式

html - CSS:垂直对齐多种文本大小

CSS 动画下拉菜单 & 动画后更改 z-index

javascript - 使用 JavaScript 在 HTML 表单中选中复选框,我只能通过 getElementsByName() 访问它们