CODEWITHSUNDEEP
svgsvg-filters
phk
phk

Reputation: 2061

Humongous height value for <filter> not preventing cutoff

I am trying to apply a <filter> on a <path> but I am having problems with things being clipped, not just the blur but also parts of original image, namely the markers.

So I tried increasing the default filter height (which is 120%) but it did not seem to help.

<svg style="height:400px;width:100%;background-color:LightCyan">

<defs>
  <filter id="colorFilter" height="999%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"></feGaussianBlur>
    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 255 0 0 0 0 0 0 0 0 3 0" result="lightenedBlur"></feColorMatrix>
    <feMerge>
      <feMergeNode in="lightenedBlur"></feMergeNode>
      <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
  </filter>
  <marker id="arrow" viewBox="0 -5 10 10" refX="0" refY="0" markerWidth="8" markerHeight="8" orient="auto" style="fill: grey;">
    <path d="M0,-5L10,0L0,5"></path>
  </marker>
</defs>

<g transform="scale(2)">

  <g transform="translate(-500,-230)">
    <path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.4632873535149,274L657.4632873535149,271.03831481933645L759.92657470703,271.03831481933645"></path>
  </g>

  <g transform="translate(-500,-200)" filter="url(#colorFilter)">
    <path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.4632873535149,274L657.4632873535149,271.03831481933645L759.92657470703,271.03831481933645"></path>
  </g>

  <g transform="translate(-500,-120)" filter="url(#colorFilter)">
    <path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.6947631835931,274L657.6947631835931,222.58172607421926L760.3895263671862,222.58172607421926"></path>
  </g>

</g>

</svg>

Now the <g> spans as much as is necessary to surround all its children, which means that for the top arrow the height isn't very much to begin with so I tried using absolute instead of relative values for the height but that does not help either:

<svg style="height:300px;width:100%;background-color:LightCyan">

<defs>
  <filter id="colorFilter" height="1234">
    <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"></feGaussianBlur>
    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 255 0 0 0 0 0 0 0 0 3 0" result="lightenedBlur"></feColorMatrix>
    <feMerge>
      <feMergeNode in="lightenedBlur"></feMergeNode>
      <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
  </filter>
  <marker id="arrow" viewBox="0 -5 10 10" refX="0" refY="0" markerWidth="8" markerHeight="8" orient="auto" style="fill: grey;">
    <path d="M0,-5L10,0L0,5"></path>
  </marker>
</defs>

<g transform="scale(2)">

  <g transform="translate(-500,-230)" filter="url(#colorFilter)">
    <path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.4632873535149,274L657.4632873535149,271.03831481933645L759.92657470703,271.03831481933645"></path>
  </g>

  <g transform="translate(-500,-150)" filter="url(#colorFilter)">
    <path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.6947631835931,274L657.6947631835931,222.58172607421926L760.3895263671862,222.58172607421926"></path>
  </g>

</g>

</svg>

Any idea what might cause this clipping and what can be done about it? Why do height attribute values above a certain point have not effect here?

(Reproduced in Chrome, Firefox and Edge – does not look like a browser bug.)

Upvotes: 2

Views: 279

Answers (1)

ccprog
ccprog

Reputation: 21821

You have to move the upper border of the filter effect region as well. Default is y=-10%.

<svg style="height:400px;width:100%;background-color:LightCyan">

<defs>
  <filter id="colorFilter" y="-200%" height="500%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"></feGaussianBlur>
    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 255 0 0 0 0 0 0 0 0 3 0" result="lightenedBlur"></feColorMatrix>
    <feMerge>
      <feMergeNode in="lightenedBlur"></feMergeNode>
      <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
  </filter>
  <marker id="arrow" viewBox="0 -5 10 10" refX="0" refY="0" markerWidth="8" markerHeight="8" orient="auto" style="fill: grey;">
    <path d="M0,-5L10,0L0,5"></path>
  </marker>
</defs>

<g transform="scale(2)">

  <g transform="translate(-500,-230)">
    <path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.4632873535149,274L657.4632873535149,271.03831481933645L759.92657470703,271.03831481933645"></path>
  </g>

  <g transform="translate(-500,-200)" filter="url(#colorFilter)">
    <path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.4632873535149,274L657.4632873535149,271.03831481933645L759.92657470703,271.03831481933645"></path>
  </g>

  <g transform="translate(-500,-120)" filter="url(#colorFilter)">
    <path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.6947631835931,274L657.6947631835931,222.58172607421926L760.3895263671862,222.58172607421926"></path>
  </g>

</g>

</svg>

As an aside, using absolute values only works if you set filterUnits="userSpaceOnUse". The same note on the use of y values applies.

Upvotes: 4

Related Questions