Question

我想模糊所有这些svg图像：https://github.com/lipis/flag-icon-css/blob/master/flags/4x3/eu.svg?short_path=4cf8a66

我想要与以下CSS相同的结果：

filter: blur(2px);
-webkit-filter: blur(2px);

有没有办法做这样的事情：

 <svg blur="0.5">

喜欢不透明度：

<svg opacity="0.5">

Answer 1

filter属性映射到SVG中的过滤器CSS属性。

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640" viewBox="0 0 640 480">
  <defs>
    <g id="d">
      <g id="b">
        <path d="M0-1l-.31.95.477.156z" id="a"/>
        <use transform="scale(-1 1)" xlink:href="#a"/>
      </g>
      <g id="c">
        <use transform="rotate(72)" xlink:href="#b"/>
        <use transform="rotate(144)" xlink:href="#b"/>
      </g>
      <use transform="scale(-1 1)" xlink:href="#c"/>
    </g>
  </defs>
  <path fill="#039" d="M0 0h640v480H0z"/>
  <g filter="blur(0.2px)" transform="translate(320 242.263) scale(23.7037)" fill="#fc0">
    <use height="100%" width="100%" xlink:href="#d" y="-6"/>
    <use height="100%" width="100%" xlink:href="#d" y="6"/>
    <g id="e">
      <use height="100%" width="100%" xlink:href="#d" x="-6"/>
      <use height="100%" width="100%" xlink:href="#d" transform="rotate(-144 -2.344 -2.11)"/>
      <use height="100%" width="100%" xlink:href="#d" transform="rotate(144 -2.11 -2.344)"/>
      <use height="100%" width="100%" xlink:href="#d" transform="rotate(72 -4.663 -2.076)"/>
      <use height="100%" width="100%" xlink:href="#d" transform="rotate(72 -5.076 .534)"/>
    </g>
    <use height="100%" width="100%" xlink:href="#e" transform="scale(-1 1)"/>
  </g>
</svg>

＆＃13;

如何模糊svg图像？

1 个答案: