时间戳

首页 > 解决方案 > 为什么我的旋转 SVG 会移位？

svg - 为什么我的旋转 SVG 会移位？

问题描述

我尝试用渐变构建我的文本的反射。但是反射（第二个文本）有一个偏移，并且通过应用旋转，字母正在移动。

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>

标签： svgrotation

解决方案

发生这种情况是因为该rotate属性会旋转各个起点。因此，较宽的字符最终会远离较窄的字符，反之亦然。

无论如何，该rotate属性是错误的方法。如果要垂直翻转文本，则应使用 atransform将 y 轴上的对象缩放 -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>

推荐阅读