直线路径上的SVG斜角效应

时间:2015-04-18 09:23:25

标签: svg inkscape svg-filters

我使用Inkscape绘制管道图,我试图让管道产生某种斜面效应。然而,部分成功,只要路径是直线,路径就会消失。我不确定为什么过滤器会这样做。它看起来像路径有某种边界框,当它是一条眩晕线时它会切割画布,我试图通过移动线的起始节点来显示它。

enter image description here

<?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>

1 个答案:

答案 0 :(得分:1)

据我所知,默认情况下,SVG过滤器应用于它们所应用的对象的边界框,但这并不包括笔划。

对于水平或垂直线,这会导致过滤器无法正常工作。

作为firefox的快速解决方法,您可以将以下属性添加到XML中的每个过滤节点:

   filterUnits="userSpaceOnUse"
   x="-500"
   y="-500"
   width="1000"
   height="1000"

这似乎不适用于Inkscape。此外,我认为它会导致不必要的大过滤区域,尽可能减少这将减少渲染图像所需的时间。