【发布时间】：2021-01-14 11:15:29
【问题描述】：
我正在尝试通过以下应用在 SVG 中的形状上实现纸上绘画效果：
- 置换过滤器和
- 模糊
在背景上一切正常，但如果我尝试对前景中的形状应用相同的过滤器，则会导致形状本身周围出现奇怪的边框，如果形状是路径，情况会变得更糟。
This 是在形状上没有过滤器的版本，this 是将过滤器应用于旋转的rect 的版本，this 是将过滤器应用于路径的版本。顺便说一句，置换和模糊过滤器似乎只在 Firefox 中可以正常工作。
rect 版本的代码如下。
我可以将漫反射照明滤镜应用于没有奇怪边框的形状吗？
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg66"
version="1.1"
viewBox="0 0 1100.20831 1529.16669"
height="1529.16669mm"
width="1100.20831mm">
<metadata
id="metadata63">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<filter id='roughpaper' x='0%' y='0%' width='100%' height="102%">
<feTurbulence type="fractalNoise" baseFrequency="0.2" result='noise' numOctaves="3" />
<feDiffuseLighting in='noise' out="paper" lighting-color='#ffffff' surfaceScale='2'>
<feDistantLight azimuth='100' elevation='60' />
</feDiffuseLighting>
<feGaussianBlur in="paper" stdDeviation="1.2" result="blurredpaper"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.7"/>
</feComponentTransfer>
</filter>
<filter id="dispmorph">
<feMorphology radius="0" in="SourceGraphic" result="morph" />
<feTurbulence type="turbulence" baseFrequency="0.04 0.04" numOctaves="2" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="morph" out="turbuled" scale="1" xChannelSelector="B" yChannelSelector="G"/>
<feGaussianBlur in="turbuled" stdDeviation="0.2" result="blur"/>
<feTurbulence type="fractalNoise" baseFrequency="0.2" result='noise' numOctaves="3" />
<feDiffuseLighting in='noise' out="paper" lighting-color='#ffffff' surfaceScale='2'>
<feDistantLight azimuth='100' elevation='60' />
</feDiffuseLighting>
<feGaussianBlur in="paper" stdDeviation="1.2" result="blurredpaper"/>
<feBlend in="blur" in2="blurredpaper" mode="multiply"/>
</filter>
<g id="layer1">
<rect
filter="url(#roughpaper)"
y="0"
x="0"
height="100"
width="100"
id="rect92"
/>
<rect
transform="rotate(-10 50 100)"
id="path82"
y="25"
x="25"
height="50"
width="50"
filter="url(#dispmorph)"
style="fill:#204a87;stroke:none" />
</g>
</svg>【问题讨论】：
-
快速观察——那些“out=”应该是“result="
标签： svg svg-filters