The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [SVG] reuse symbol element with transformation

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #188212

    Hi, so I’m playing around with svg icons and so far it’s pretty cool except one things I’m not able to do. I would like to reuse some shape with different rotation (triangle, arrow…).

    For instance, I create an arrow shape pointing to the top and would like to use this exact same shape for arrow pointing at any direction. Problem is when we start doing transformation (css or svg) on an element, we lose control over boundaries and positioning because transformation are applied after. It’s pretty hard then to position them or to use them as block element amongst others.

    I’m convinced this is possible using some combination of viewbox and preserveAspectRatio but I’m unable to do it :'(

    Here is a codepen with a simple triangle to illustrate what I’m trying to do.
    Using <use> elements is essential.


    What crop the svg is value of viewbox, if it’s cropped it means theses values are wrong and that’s my problem.

    You answer is interesting because at first my triangle was a right-triangle so rotation of 90,180,270 degree was fine as you said. But I thought this was a special case I wanted to try on a “general” case so I changed it.

    Now I’ve not thought about that as a workaround. This will work but I consider it as a workaround and not a proper solution because this means adding extra space around the shape to make it fit on a square. Also this only work for some rotation (+/- 90,180,270). To make it work for all rotation shapes should be contained within a circle within a square (even more extra space).

    I may be expecting too much from svg embedded on html and this workaround may be the unique solution.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.