Question

这是一个简单的情况。我旁边有一个带有文字的三角形。

<svg style="background-color:silver" width="100%" height="100%">
    <path d="M 0,0 L 100,100 L0,100 Z" />
    <text x="50" y="50" font-size="5mm">Text</text>
</svg>

通过添加一个viewBox，我可以轻松地告诉三角形调整大小，因为画布会调整大小。

<svg style="background-color:silver" width="100%" height="100%" viewBox="0 0 100 100">
    <path d="M 0,0 L 100,100 L0,100 Z" />
    <text x="50" y="50" font-size="5mm">Text</text>
</svg>

这个问题是它也会缩放文本，这是我不想要的。我无法将文本移到此viewBox之外，因为我需要缩放x，y位置。

我通过创建两个画布来解决这个问题，一个用于图形，一个用于文本，然后将一个放在另一个之上。这要求顶部画布具有透明背景，SVG标准不支持我正在阅读的内容。

我通过在thcan上使用第二个SVG画布进行解决方法，将文本移动到另一个SVG，因为我不能这可能没问题，如果我有一个图像并且正在尝试放大。但我想的更多的是地图，当你放大时，文字保持相同的大小。

所以我的问题是如何保持文本大小不变？

我见过其他人使用JavaScript来动态读取viewBox使用的变换并为文本创建逆变换。我真的不想引入动态脚本，当我想做的就是拥有静态的非动态文本时。

Answer 1

感谢BigBadaboom指出SVG可以具有透明背景这意味着我的解决方案实际上是一种可接受的解决方案。

<div>
<svg style="position:absolute; left:0px; top:0px; width:100%; height:100%; background-color:silver" viewBox="0 0 100 100">
    <path d="M 0,0 L 100,100 L0,100 Z" />
</svg>
<svg style="position:absolute; left:0px; top:0px; width:100%; height:100%; background-color:transparent">
    <text x="50%" y="50%" font-size="5pt">Text</text>
</svg>
</div>

position:absolute; left:0px; top:0px将两幅画布放在同一位置第一个svg标记中的viewBox"0 0 100 100"使路径中的无单位数字表现得像百分比第二个svg标记中缺少viewBox允许文本标记使用百分比进行定位（如第一个svg标记），同时使用字体大小的绝对单位。

结果是整个图片调整大小，同时将文本保持为指定的字体大小。

Answer 2

这要求顶部画布具有透明背景我正在阅读的内容不受SVG标准的支持。

这是不正确的。 SVG规范中没有任何内容表明SVG具有不透明的背景。

所以我的问题是如何保持文本大小不变？

除了你提到的脚本方法之外，真的没办法做到这一点。

在SVG中是否有一种方法可以告诉子元素不与父变换？

2 个答案: