How to rotate SVG path without clipping and without increasing container <svg> height/width?-CodePudding

Is it possible to rotate an svg path without clipping it? I'm aware that I can increase the size of the container, but I don't want to do this. I tried to rotate the svg container at the same angle as the path, but it doesn't work.

This is my basic svg setup:

<svg width = {600} height = {600} viewBox = "0 0 600 600">
<svg x = {10} y = {10} height = {40} width = {100} viewBox = "0 0 100 40">
<path d= {"M0 0 L100 40 M0 40 L100 0"} />
</svg>
<svg>

If I add transform={rotate(90)} transform-origin="50% 50%" to the path element, then the element rotates, but gets cutoff by the svg.

If I instead add that same code to the parent svg (the 100 width one), then absolutely nothing happens.

CodePudding user response：

In general it depends on the use case. Here are two examples that might help where I place the cross using the transform attribute. The red cross is your original path where 0,0 is in the upper left corner. Here I translate the first and then rotate. The same happens with the blue cross, but here I have moved 0,0 to the middle of the cross. This can help in cases where the element needs to rotate a lot or copied around.

svg {
  border: solid thin black;
  display: block;
}

<svg width="200" height="200" viewBox="0 0 100 100">
  <path d="M0 0 L100 40 M0 40 L100 0"
  transform="translate(70 0) rotate(90)"
  stroke="blue" />
</svg>

<svg width="200" height="200" viewBox="0 0 100 100">
  <path d="M -50 -20 L 50 20 M -50 20 L 50 -20"
  transform="translate(50 50) rotate(90)"
  stroke="red" />
</svg>

CodePudding user response：

You need to reserve enough space for your path to rotate in. Without changing the container size, you can define the viewBox to include all the coordinates where the rotated path could end at. That rectangle will then be fitted into your container.

If you rotate the path around its center at (50, 20), its upper limit with a rotation of 90deg will end at y=-30. The viewBox needs to include that value.

Your code also indicates you want to move the path 10, 10 away from the upper left corner. To achieve that and leave it at its original size, set viewBox="-10 -40 600 600". That rectangle will be fit into your outer <svg>, without the need to define an inner one.

<svg width="600" height="600" viewBox="-10 -40 600 600">
  <path d="M0 0 L100 40 M0 40 L100 0" stroke="red" />
  <path transform="rotate(90, 50, 20)" d="M0 0 L100 40 M0 40 L100 0" stroke="blue" />
</svg>