Question

我想创建一个过滤器，当应用于html元素时，会将渐变应用于整个元素。 css渐变仅适用于背景，因此它不是我想要的。我想要的是说我的元素包含一个三角形和一个圆形，我想对我的元素应用滤镜，三角形和圆形将应用渐变。

这是我到目前为止所得到的：

＆＃13;

.my-element{
    filter: url(svg.svg#filter);
}

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <linearGradient id="lightGradient" gradientTransform="rotate(-5)">
            <stop stop-color="white" stop-opacity="0.4" offset="0%"/>
            <stop stop-color="white" stop-opacity="0.5" offset="5%"/>
            <stop stop-color="black" stop-opacity="0.2" offset="6%"/>
            <stop stop-color="black" stop-opacity="0.3" offset="19%"/>
            <stop stop-color="black" stop-opacity="0.2" offset="12%"/>
            <stop stop-color="white" stop-opacity="0.8" offset="13%"/>
            <stop stop-color="white" stop-opacity="0.9" offset="15%"/>
            <stop stop-color="white" stop-opacity="0" offset="15%"/>
            <stop stop-color="white" stop-opacity="0" offset="16%"/>
            <stop stop-color="white" stop-opacity="0.8" offset="16%"/>
            <stop stop-color="white" stop-opacity="0.9" offset="18%"/>
            <stop stop-color="white" stop-opacity="0" offset="18%"/>
            <stop stop-color="white" stop-opacity="0" offset="20%"/>
            <stop stop-color="white" stop-opacity="1" offset="20%"/>
            <stop stop-color="white" stop-opacity="1" offset="25%"/>
        </linearGradient>

        <rect id="recGradient" x="0" y="0" width="100%" height="100%" fill="url(#lightGradient)"/>

        <filter id="filter" primitiveUnits="objectBoundingBox">
            <feImage x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" xlink:href="#recGradient"/>

            <feComposite operator="in" in="SourceGraphic"/>
        </filter>
      </defs>
    </svg>

＆＃13;

编辑：使用上面的代码，元素在Firefox中变得不可见，在chrome中似乎有效。

所以，显然我做错了。我不知道如何创建svg过滤器，所以任何帮助都将不胜感激。

Answer 1

这是您构建跨浏览器过滤器的方法，可以在此处执行您想要的操作。这些问题很棘手，因为您在DataURI中定义了一个带有应用渐变的矩形，然后使用feImage将其拉入过滤器，然后使用CSS过滤器中的SVG过滤器陷门将其应用于HTML内容。但它确实有效。

（顺便说一句 - 目前尚不清楚是否要保留原始文本的颜色，只是应用不透明度渐变，或者是否希望黑/白渐变覆盖原始颜色。您可以通过更改来切换feComposite中的“in2”到“in”。这决定了你是否将sourcegraphic的不透明度应用于渐变，反之亦然。）

div {
  filter: url(#myGradient);
}

<svg>
  <defs>
<filter id="myGradient" primitiveUnits="objectBoundingBox">
       <feImage x="0%" y="0%" width="100%" height="100%" preserveAspectRatio="none" xlink:href="data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22200px%22%20height%3D%22200px%22%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'lightGradient'%20gradientTransform%3D'rotate(-5)'%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0.4'%20offset%3D'0%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0.5'%20offset%3D'5%25'%2F%3E%3Cstop%20stop-color%3D'black'%20stop-opacity%3D'0.2'%20offset%3D'6%25'%2F%3E%3Cstop%20stop-color%3D'black'%20stop-opacity%3D'0.3'%20offset%3D'19%25'%2F%3E%3Cstop%20stop-color%3D'black'%20stop-opacity%3D'0.2'%20offset%3D'12%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0.8'%20offset%3D'13%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0.9'%20offset%3D'15%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0'%20offset%3D'15%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0'%20offset%3D'16%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0.8'%20offset%3D'16%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0.9'%20offset%3D'18%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0'%20offset%3D'18%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0'%20offset%3D'20%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'1'%20offset%3D'20%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'1'%20offset%3D'25%25'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%0A%20%20%3Crect%20id%3D'recGradient'%20x%3D'0%25'%20y%3D'0%25'%20width%3D'100%25'%20height%3D'100%25'%20fill%3D'url(%23lightGradient)'%2F%3E%3C%2Fsvg%3E"/>
  <feComposite operator="in" in2="SourceGraphic"/>
 </filter>
  </defs>
</svg>




<div>
  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text   Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text    Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text    Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text    Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text    Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text    Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text   
</div>

如何使用svg过滤器应用渐变

1 个答案: