[英]Creating a linear gradient SVG filter
Essentially I'm trying to create an gradient alpha mask in using SVG and CSS ( like this ), and since the mask
property is no longer on the standards track I'm exploring the filter
route .本质上,我正在尝试使用 SVG 和 CSS( 像这样)创建渐变 alpha 蒙版,并且由于mask
属性 不再在标准轨道上,我正在探索filter
路线。
I've created a vertical alpha mask in Sketch , with the top being 0% #000000
and the bottom being 100% #000000
, then exported it as an SVG and tweaked it using guidance from this O' Reilly article .我在Sketch 中创建了一个垂直 alpha 蒙版,顶部为 0% #000000
,底部为 100% #000000
,然后将其导出为 SVG 并使用O' Reilly 文章中的指导对其进行调整。 It now looks like this:现在看起来像这样:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<!-- Start by creating our vertical linear gradient -->
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="alphaLinear">
<stop offset="0%" style="stop-color: #000000; stop-opacity: 0%;" />
<stop offset="100%" style="stop-color: #000000; stop-opacity: 100%;" />
</linearGradient>
<!-- Create a rectangle and apply the gradient as its fill -->
<rect id="boxRect" x="0" y="0" width="100%" height="200" style="fill: url(#alphaLinear);" />
<!-- Using that rectangle, we'll create a filter -->
<filter id="alphaGrad">
<feImage xlink:href="#boxRect" result="grad"/>
<feDisplacementMap scale="10" xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="grad"/>
</filter>
</defs>
<use id="gradientBox" fill="url(#alphaGradient)" xlink:href="#boxRect"></use>
</svg>
My knowledge of SVG isn't the greatest so I'm suspecting this is where I've gone wrong.我对 SVG 的了解并不多,所以我怀疑这是我出错的地方。
Next, I applied the filter using filter
(and -webkit-filter
) along with referencing the filter ID #alphaGrad
:接下来,我使用filter
(和-webkit-filter
)以及引用过滤器 ID #alphaGrad
过滤器:
-webkit-filter: url('http://blahblah.com/alphagradient.svg#alphaGrad');
But, of course, this it doesn't work.但是,当然,这是行不通的。 Can anyone help me get the hang of this?谁能帮我解决这个问题? Or is this even possible?或者这甚至可能吗? If not, can someone recommend a method of how to achieve this?如果没有,有人可以推荐一种如何实现这一目标的方法吗?
Thanks in advance!提前致谢!
Update: here's a pretty basic fiddle of what I'm doing...更新:这是我正在做的事情的一个非常基本的小提琴......
There are many errors and misconceptions in your example (why did you think a displacementMap would help you?)您的示例中有很多错误和误解(为什么您认为置换贴图会帮助您?)
Why don't you start from the code below - pure SVG using an SVG mask and an SVG image.为什么不从下面的代码开始 - 使用 SVG 蒙版和 SVG 图像的纯 SVG。
<svg width="600px" height="600px" viewbox="0 0 600 600">
<defs>
<linearGradient id="alphaLinear">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0%" />
<stop offset="100%" stop-color="#999999" stop-opacity="100%" />
</linearGradient>
<mask id="Mask">
<rect x="0" y="0" width="600" height="600" fill="url(#alphaLinear)" />
</mask>
</defs>
<image xlink:href="http://upload.wikimedia.org/wikipedia/commons/7/71/Anadama_bread_(1).jpg" width="600" height="600" x="0" y="0" preserveAspectRatio="xMinYMin meet" mask="url(#Mask)"/>
</svg>
Few remarks:几点说明:
SVG (and CSS) opacity
value is not percertentual range but 0.0 - 1.0 range. SVG(和 CSS) opacity
值不是永久范围,而是 0.0 - 1.0 范围。
Mentioned mask
property appears to be just prefixed in Webkit and unprefixed in Gecko.提到的mask
属性似乎只是在 Webkit 中加上前缀而在 Gecko 中没有前缀。
If your target environment is HTML + CSS, you might not necessarily need SVG: you could get similar effect using linear-gradient and RGBA background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%);
如果您的目标环境是 HTML + CSS,您可能不一定需要 SVG:您可以使用 linear-gradient 和 RGBA background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%);
获得类似的效果background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%);
on some overlay (pseudo) element.在某些叠加(伪)元素上。 pointer-events: none;
could be useful then.那么可能会有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.