Kevin Powell - Community•3y ago

SVG Path

https://codepen.io/aldrinbright/pen/ZEjNXEE why is my second path not visible ?

Aldrin Bright

CodePen

ZEjNXEE

...

5 Replies

MarkBoots•3y ago

because it is outside the viewbox

<svg stroke="var(--button-color)" fill="none" class="hamburger" viewBox="40 10 120 120" width="250">
    <path class="line" viewBox="-10 -10 120 120" stroke-linecap="round" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" d='m 140 60 h -80 a 1 1 0 0 1 0 -10 c 0 0 5 -1 60 60'></path>
    <path class="line" viewBox="-10 -10 120 120" stroke-linecap="round" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" d='m -60 -30 h 80 v -30 c -10 -2 0 0 -60 60'></path>
  </svg>

<svg stroke="var(--button-color)" fill="none" class="hamburger" viewBox="40 10 120 120" width="250">
    <path class="line" viewBox="-10 -10 120 120" stroke-linecap="round" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" d='m 140 60 h -80 a 1 1 0 0 1 0 -10 c 0 0 5 -1 60 60'></path>
    <path class="line" viewBox="-10 -10 120 120" stroke-linecap="round" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" d='m -60 -30 h 80 v -30 c -10 -2 0 0 -60 60'></path>
  </svg>

the second path moves to -60 -30

AldrinOP•3y ago

ok got it, thanks👍

capt_uhu•3y ago

FYI, viewbox is only valid as an attribute on the svg element. It won't do anything on a path element.

MarkBoots•3y ago

ah yea true, forgot to mention that (viewbox also works for marker, pattern, symbol and view btw, but that doesnt matter for this case)

AldrinOP•3y ago

ok 👍

Gaming

Programming

SVG Path

Did you find this page helpful?