我正在使用 Inkscape 绘制管道图，我试图使管 Prop 有某种斜角效果。我部分成功了，但是，只要路径是直线，路径就会消失。我不确定为什么过滤器会这样做。看起来路径有某种边界框，只要它是一条直线，它就会切割 Canvas ，我试图通过移动线的起始节点来显示它。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
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"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="297mm"
height="210mm"
viewBox="0 0 1052.3622 744.09448"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="drawing.svg">
<defs
id="defs4">
<linearGradient
id="linearGradient8399"
osb:paint="solid">
<stop
style="stop-color:#b00000;stop-opacity:1;"
offset="0"
id="stop8401" />
</linearGradient>
<linearGradient
id="linearGradient8379"
osb:paint="solid">
<stop
style="stop-color:#000000;stop-opacity:1;"
offset="0"
id="stop8381" />
</linearGradient>
<marker
inkscape:stockid="Arrow1Lstart"
orient="auto"
refY="0"
refX="0"
id="Arrow1Lstart"
style="overflow:visible"
inkscape:isstock="true">
<path
id="path4402"
d="M 0,0 5,-5 -12.5,0 5,5 0,0 Z"
style="fill:#0088ab;fill-opacity:1;fill-rule:evenodd;stroke:#0000ab;stroke-width:1pt;stroke-opacity:1"
transform="matrix(0.8,0,0,0.8,10,0)"
inkscape:connector-curvature="0" />
</marker>
<marker
inkscape:stockid="Arrow1Lend"
orient="auto"
refY="0"
refX="0"
id="Arrow1Lend"
style="overflow:visible"
inkscape:isstock="true">
<path
id="path4405"
d="M 0,0 5,-5 -12.5,0 5,5 0,0 Z"
style="fill:#0088ab;fill-opacity:1;fill-rule:evenodd;stroke:#0000ab;stroke-width:1pt;stroke-opacity:1"
transform="matrix(-0.8,0,0,-0.8,-10,0)"
inkscape:connector-curvature="0" />
</marker>
<filter inkscape:label="Bevel1" id="Bevel" filterUnits="objectBoundingBox" x="-10%" y="-10%" width="150%" height="150%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant="0.5" specularExponent="10" result="specOut" lighting-color="white">
<fePointLight x="-5000" y="-10000" z="20000"/>
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/>
<feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint" />
</filter>
<filter inkscape:label="Bevel2" id="Bevel2" filterUnits="objectBoundingBox" x="-10%" y="-10%" width="150%" height="150%">
<feGaussianBlur in="SourceAlpha" stdDeviation="0.5" result="blur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant="0.5" specularExponent="10" result="specOut" lighting-color="white">
<fePointLight x="-5000" y="-10000" z="0000"/>
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/>
<feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint" />
</filter>
<filter
inkscape:label="Pipe"
inkscape:menu="Bevels"
inkscape:menu-tooltip="Soft bevel, slightly depressed middle"
style="color-interpolation-filters:sRGB"
id="filter4992">
<feGaussianBlur
stdDeviation="2.3"
in="SourceAlpha"
result="result0"
id="feGaussianBlur4994" />
<feMorphology
in="SourceAlpha"
radius="6.6"
result="result1"
id="feMorphology4996" />
<feGaussianBlur
stdDeviation="8.9"
in="result1"
id="feGaussianBlur4998" />
<feColorMatrix
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.3 0"
result="result91"
id="feColorMatrix5000" />
<feComposite
in="result0"
operator="out"
result="result2"
in2="result91"
id="feComposite5002" />
<feGaussianBlur
stdDeviation="1.7"
result="result4"
id="feGaussianBlur5004" />
<feDiffuseLighting
surfaceScale="3.01699996"
id="feDiffuseLighting5006">
<feDistantLight
azimuth="225"
elevation="45"
id="feDistantLight5008" />
</feDiffuseLighting>
<feBlend
in2="SourceGraphic"
mode="multiply"
id="feBlend5010" />
<feComposite
in2="SourceAlpha"
operator="in"
result="result3"
id="feComposite5012" />
<feComposite
in2="result3"
operator="atop"
id="feComposite5018" />
</filter>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath8692">
<path
d="M 0,560 960,560 960,0 0,0 0,560 Z"
id="path8694"
inkscape:connector-curvature="0" />
</clipPath>
<linearGradient
x1="0"
y1="0"
x2="1"
y2="0"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(9,0,0,-9,310,400)"
spreadMethod="pad"
id="linearGradient8656">
<stop
style="stop-opacity:1;stop-color:#cccccc"
offset="0"
id="stop8658" />
<stop
style="stop-opacity:1;stop-color:#666666"
offset="0.516129"
id="stop8660" />
<stop
style="stop-opacity:1;stop-color:#cccccc"
offset="1"
id="stop8662" />
</linearGradient>
<linearGradient
x1="0"
y1="0"
x2="1"
y2="0"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(4.0585937,0,0,-4.0585937,312.9707,400.18848)"
spreadMethod="pad"
id="linearGradient8678">
<stop
style="stop-opacity:1;stop-color:#808080"
offset="0"
id="stop8680" />
<stop
style="stop-opacity:1;stop-color:#666666"
offset="0.516129"
id="stop8682" />
<stop
style="stop-opacity:1;stop-color:#808080"
offset="1"
id="stop8684" />
</linearGradient>
<linearGradient
x1="0"
y1="0"
x2="1"
y2="0"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(4,0,0,-4,313,408.5)"
spreadMethod="pad"
id="linearGradient8716">
<stop
style="stop-opacity:1;stop-color:#808080"
offset="0"
id="stop8718" />
<stop
style="stop-opacity:1;stop-color:#666666"
offset="0.516129"
id="stop8720" />
<stop
style="stop-opacity:1;stop-color:#808080"
offset="1"
id="stop8722" />
</linearGradient>
<linearGradient
x1="0"
y1="0"
x2="1"
y2="0"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(-3e-7,7,7,3e-7,314.69287,405)"
spreadMethod="pad"
id="linearGradient8738">
<stop
style="stop-opacity:1;stop-color:#4d4d4d"
offset="0"
id="stop8740" />
<stop
style="stop-opacity:1;stop-color:#000000"
offset="0.516129"
id="stop8742" />
<stop
style="stop-opacity:1;stop-color:#4d4d4d"
offset="1"
id="stop8744" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient8656"
id="linearGradient7559"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(9,0,0,-9,310,400)"
spreadMethod="pad"
x1="0"
y1="0"
x2="1"
y2="0" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient8678"
id="linearGradient7561"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(4.0585937,0,0,-4.0585937,312.9707,400.18848)"
spreadMethod="pad"
x1="0"
y1="0"
x2="1"
y2="0" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient8716"
id="linearGradient7563"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(4,0,0,-4,313,408.5)"
spreadMethod="pad"
x1="0"
y1="0"
x2="1"
y2="0" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient8738"
id="linearGradient7565"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(-3e-7,7,7,3e-7,314.69287,405)"
spreadMethod="pad"
x1="0"
y1="0"
x2="1"
y2="0" />
<symbol
id="symbol7344">
<g
id="g8961"
transform="translate(-12.857143,-45)">
<g
transform="matrix(10.322682,0,0,-9.3703008,-2818.9541,4376.9346)"
id="g8644">
<g
id="g8646">
<g
id="g8652">
<g
id="g8654">
<path
inkscape:connector-curvature="0"
id="path8664"
style="fill:url(#linearGradient7559);stroke:none"
d="m 314.539,400.13 -4.539,2.211 0,-4.682 4.593,1.834 4.407,-1.834 0,4.682 -4.461,-2.211 z" />
</g>
</g>
</g>
</g>
<g
transform="matrix(9.3703008,0,0,-9.3703008,-2523.716,4376.9346)"
id="g8666">
<g
id="g8668">
<g
id="g8674">
<g
id="g8676">
<path
inkscape:connector-curvature="0"
id="path8686"
style="fill:url(#linearGradient7561);stroke:none"
d="m 312.97,400.189 c 0,-1.122 0.909,-2.03 2.03,-2.03 l 0,0 c 1.121,0 2.029,0.908 2.029,2.03 l 0,0 c 0,1.12 -0.908,2.028 -2.029,2.028 l 0,0 c -1.121,0 -2.03,-0.908 -2.03,-2.028" />
</g>
</g>
</g>
</g>
<g
transform="matrix(9.3703008,0,0,-9.3703008,-2519.716,4376.9346)"
id="g8688">
<g
clip-path="url(#clipPath8692)"
id="g8690">
<g
transform="translate(309.5,404)"
id="g8696" />
<g
transform="translate(319.5,404)"
id="g8700">
<path
inkscape:connector-curvature="0"
id="path8702"
style="fill:none;stroke:#c1272d;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="M 0,0 0,-9" />
</g>
</g>
</g>
<g
transform="matrix(9.3703008,0,0,-9.3703008,-2523.716,4376.9346)"
id="g8704">
<g
id="g8706">
<g
id="g8712">
<g
id="g8714">
<path
inkscape:connector-curvature="0"
id="path8724"
style="fill:url(#linearGradient7563);stroke:none"
d="m 313,412.535 0,-9.535 4,0 0,9.535 c 0,0 -0.292,1.465 -2.041,1.465 l 0,0 C 313.21,414 313,412.535 313,412.535" />
</g>
</g>
</g>
</g>
<g
transform="matrix(9.3703008,0,0,-9.3703008,-2523.716,4376.9346)"
id="g8726">
<g
id="g8728">
<g
id="g8734">
<g
id="g8736">
<path
inkscape:connector-curvature="0"
id="path8746"
style="fill:url(#linearGradient7565);stroke:none"
d="m 312.335,412 c -1.859,0 -3.366,-1.641 -3.366,-3.5 l 0,0 c 0,0 0,1.859 0,0 l 0,0 c 0,-1.859 1.507,-3.5 3.366,-3.5 l 0,0 4.716,0 c 1.859,0 3.366,1.641 3.366,3.5 l 0,0 c 0,1.859 -1.507,3.5 -3.366,3.5 l 0,0 -4.716,0 z" />
</g>
</g>
</g>
</g>
</g>
<rect
style="fill:currentColor;fill-opacity:1;stroke:none"
id="rect8397"
width="10.714286"
height="90"
x="357.85715"
y="543.79077" />
</symbol>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.4"
inkscape:cx="278.01149"
inkscape:cy="501.16844"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1003"
inkscape:window-x="-9"
inkscape:window-y="-9"
inkscape:window-maximized="1"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
units="mm" />
<metadata
id="metadata7">
<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 />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(4.0999855,121.23227)">
<path
style="fill:none;fill-rule:evenodd;stroke:#0012ff;stroke-width:12.89999962;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter4992)"
d="m 52.14287,-19.780663 c 185.81573,-1.274494 96.29616,30.57495 255.99999,96.428577"
id="path4712"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<path
style="fill:none;fill-rule:evenodd;stroke:#0012ff;stroke-width:12.89999962;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter4992)"
d="m 234.49999,188.43361 159.99999,0.14286 0,154.14286 81,0 0,186.42857"
id="path4712-3"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
<use
xlink:href="#symbol7344"
id="use7373"
class="yellow"
transform="translate(-19.285714,-17.142857)"
x="0"
y="0"
width="100%"
height="100%" />
<use
id="use7439"
xlink:href="#symbol7344"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(-298.3187,-17.276789)" />
<rect
style="fill:#0000ff;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
id="rect8227"
width="111.42857"
height="117.85714"
x="346.61432"
y="12.147933" />
<path
style="fill:none;fill-rule:evenodd;stroke:#0012ff;stroke-width:13;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;"
d="m 42.328585,132.86221 156.428565,0 0,0"
id="path8231"
inkscape:connector-curvature="0" />
</g>
</svg>
最佳答案
我的理解是，默认情况下 SVG 过滤器应用于它们所应用到的对象的边界框，这不包括笔划。
对于水平线或垂直线，这会导致过滤器无法正常工作。
作为 Firefox 的快速解决方法，您可以将以下属性添加到 XML 中的每个过滤器节点:
filterUnits="userSpaceOnUse"
x="-500"
y="-500"
width="1000"
height="1000"
这在 Inkscape 中似乎不起作用。另外我相信它会导致不必要的大过滤器区域，尽可能减少它会减少渲染图像所需的时间。
关于直线路径上的SVG斜角效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29715355/