发表新帖
发表新帖

Referencing in-page SVG in Chrome

前端 未结
关注
2 1245
忘掉有多难
忘掉有多难 2021-01-27 20:56

Interesting question for someone. I\'m trying to apply an SVG filter to an image loaded in the page using the following markup:
相关标签:
2条回答
  • 北海茫月
    2021-01-27 21:43

    Nevermind, turns out the filter: url() syntax isn't webkit-friendly, despite what I'd read elsewhere.

    Instead, for this particular scenario you need to use the CSS rule:

    -webkit-filter: grayscale(100%);

    0 讨论(0)
  • 清酒与你
    2021-01-27 21:49

    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 started supporting filters in version 6, see table of support for all browsers.

    0 讨论(0)
 看不清?
提交回复
热议问题