CODEWITHSUNDEEP
csssvgsvg-filters
Kirill Zotov
Kirill Zotov

Reputation: 83

SVG filter from another invisible SVG removes target completely

So I have 2 SVG elements at my page: one with path and another with filter (I made this to be able to apply that filter to multiple SVGs

<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 1 1 " class="filter-target">
  <path filter="url(#glow)" d="M 0,0 v 1 h 1 v-1 h-1 z" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1 1" class="filter-source">
  <defs>
    <filter id="glow">
      <feFlood flood-color="rgb(0,0,255)" in="SourceAlpha" result="makeBlue" />
      <feMerge>
        <feMergeNode in="makeBlue"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
</svg>

Everything was ok but then I decided to hide second SVG to prevent layout issues. So I made the following CSS:

.filter-source {
  display: none;
}
.filter-target {
  width: 40px;
  height: 40px;
  border: 1px red dashed;
}

As a result, path with filter attribute disappeared too, just like browser removed second SVG completely instead hiding.

Got the same effect at Chrome 76 and Firefox 60 under Linux.

Is it a bug or spec?

Fiddle is here

Upvotes: 2

Views: 1292

Answers (1)

vqf
vqf

Reputation: 2628

The filter inherits the property display: none, so nothing is displayed in the visible svg. I think you should remove the .filter-source css code and simply add width="0" height="0" to the second svg:

.filter-target {
  width: 40px;
  height: 40px;
  border: 1px red dashed;
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 1 1 " class="filter-target">
  <path filter="url(#glow)" d="M 0,0 v 1 h 1 v-1 h-1 z" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1 1" class="filter-source" width="0" height="0">
  <defs>
    <filter id="glow">
      <feFlood flood-color="rgb(0,0,255)" in="SourceAlpha" result="makeBlue" />
      <feMerge>
        <feMergeNode in="makeBlue"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
</svg>
Now the layout is not interrumpted

EDIT after comments

  1. Why path stays visible when I return display:none back? This is a question about browser behavior. I see it happens in Chrome, but not in Firefox. Obviously, the correct behavior is that of Firefox.

  2. documentation you referenced says "it does not prevent elements from being referenced by other elements" The element is being referenced, but its display property is none, and that is why you see no color. You are applying an invisible filter.

  3. display property is not inherited The third paragraph of the document reads:

    When applied to a container element, setting display to none causes the container and all of its children to be invisible; thus, it acts on groups of elements as a group. This means that any child of an element with display="none" will never be rendered even if the child has a value for display other than none.

Bear in mind that we are talking about svg display, rather than css display.

Upvotes: 1

Related Questions