Sign in
Log inSign up

What are some interesting gotcha's you've come across when learning a new language, framework, etc.

J03's photo
J03
·Apr 21, 2017

TIL: Putting a classes on a polyline (or similar) element inside a group causes something annoying to happen with the classes placed on the use tags using the groups containing previously mentioned polyline (or similar) tag; namely, only the classes placed on the last use tag take effect for all other use tags.

<defs>
    <g id="foo">
        <polyline points="0 0 10 10" class="fizz"/>
    </g>
</defs>
<use xlink:href="#foo" class="bar" x="0" y="0"/>
<use xlink:href="#foo" class="buzz" x="0" y="10"/>

The buzz class will be retro-actively applied to the use tag above it in this instance, but if you had:

<defs>
    <g id="foo">
        <polyline points="0 0 10 10"/>
    </g>
</defs>
<use xlink:href="#foo" class="bar" x="0" y="0"/>
<use xlink:href="#foo" class="buzz" x="0" y="10"/>

Then the classes would be applied appropriately. This seems to only be the case when the fizz class uses an animation property:

SVG class Gotcha

What are some similarly perplexing / annoying situations you've come across?

(P.S. And if you have any insight into why the above situation happens [only tested on chrome], that would be cool too, but more interested in hearing stories about your situations.)

6