1
html要素に適用すると、要素全体にグラデーションを適用するフィルタを作成したいと思います。 CSSのグラデーションは背景にのみ適用されるので、私が望むものではありません。 私が欲しいのは、要素に三角形と円が含まれているとします。要素にフィルタを適用すると、三角形と円に勾配が適用されます。svgフィルタを使用してグラデーションを適用する方法
.my-element{
filter: url(svg.svg#filter);
}<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>編集：上記のコードで要素がちょうどFirefoxで見えなくなり、クロームで動作しているように
これは私がこれまで持っているものです。
だから、私は間違っています。私はどのようにsvgフィルタを作成するか分からないので、任意の助けに感謝します。
で矩形を作成してみてください勾配をつけて、直角にfeImageフィルターを向ける。 –
@robertこんにちは、サンプルコードを表示できますか？私は '
@RobertLongson ok xmlns：xlink = "http://www.w3.org/1999/xlink "、それは今解析するが、私は望む結果を得ていない。私は何をしたのかを示すために投稿を編集します。 – BigName