CODEWITHSUNDEEP
svgrotation
user2485259
user2485259

Reputation: 1

Why is my rotated SVG shifted?

I try to build a reflection of my text with gradient. But the reflection (the second text) has an off set and by applying the rotation the letters are shifting.

body {
  background-color: black;
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"  width="1000"     height="140"  viewBox="0 0 1000 140">
<text x="260" y="70" font-size="60" fill=" #888888" style="text-anchor: right">Multimediale Kunst</text>
<defs>
  <linearGradient id="linearGradient" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" stop-color="#000000" />
    <stop offset="10%" stop-color="#666666" />
  </linearGradient>
</defs> 
<text rotate="180"  x="310"  y="80" font-size="60" fill="url(#linearGradient)" style="text-anchor: right">Multimediale Kunst</text>
</svg>

Upvotes: 0

Views: 51

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

This is happening because the rotate attribute rotates individual start points. So wider characters end up further away from narrow characters and vice-versa.

The rotate attribute is the wrong approach anyway. If you want to vertically flip the text, then you should use a transform that scales the object on the y axis by -1.

body {
  background-color: black;
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"  width="1000"     height="140"  viewBox="0 0 1000 140">
<text x="260" y="70" font-size="60" fill=" #888888" style="text-anchor: right">Multimediale Kunst</text>
<defs>
  <linearGradient id="linearGradient" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="50%" stop-color="#000000" />
    <stop offset="100%" stop-color="#666666" />
  </linearGradient>
</defs> 
<text x="260"  y="-80" font-size="60" fill="url(#linearGradient)" style="text-anchor: right" transform="scale(1,-1)">Multimediale Kunst</text>
</svg>

Upvotes: 1

Related Questions