Question

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

const expression = `obj[keyv]`;
let value = eval(expression);

if (value && typeof value === 'object') {
   console.log(JSON.stringify(value));
}
else {
  console.log(value);
}

body {
  background-color: black;
}

Answer 1

这种情况正在发生，因为rotate属性会旋转各个起始点。如此宽广的角色最终会远离狭隘的角色，反之亦然。

rotate属性无论如何都是错误的方法。如果要垂直翻转文本，则应使用transform将y轴上的对象缩放-1。

＆＃13;

body {
  background-color: black;
}

＆＃13;

<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>

＆＃13;

为什么我的旋转SVG移位了？

1 个答案: