Question

如果我在画布上有几条线（块，多边形，等等），我希望它们的笔触宽度保持不变，即使我放大...

例如，我有一个温度与时间的关系图，时间轴上有一条小线标记每小时 - 所以它们之间的距离随着我放大而增加，但我不想要它们得到任何更厚的......

然后我可以为t轴对象提供 vector-effect =＆＃34; non-scaling-stroke＆＃34; 的属性。

但是假设我有几个文本......

例如，每隔24小时写一个日期......

然后似乎没有办法阻止文本被拉伸;即我无法提供属性 text-effect =＆＃34; non-scaling-text＆＃34; ...

在我的例子中，我只放大一个维度，伸展的文本很难看，而且压缩的文本是不可读的。

有没有解决方法呢？

根据要求，这里有更多细节。

我在比观看区域宽得多的画布上绘制图形（如果变焦，它将变得更宽）。提供了滑块，以便观众可以 pan 和 zoom 来详细检查它的任何部分。

因此有两个对象 graphobj 来自应用程序数据，而 tlineobj 是时间轴，它由画布长度的一行组成，标记小时的短垂直线和标记每天开始的较大垂直线。因此，每次观众改变滑块时，它都会遵循

之类的内容

tlineobj.setAttribute("transform", 'translate('+someamount+',0), 'scale('+someamount+',1)')

ans同样适用于graphobj。所以我将它水平拉伸，但不是垂直拉伸。

现在tlineobj由Javascript例程构建。为简单起见，忘记日期和月份的名称，让我们在适当的位置写下 daynos 。所以我写了一个函数：

Function doDate(i) {
    dayno = some_model.cloneNode(false)
    dayno.appendChild(document.createTextNode(i))
    dayno.setAttribute("x", i*some_factor)
    tlineobj.appendChild(dayno)
}

但是现在当tlineobj变焦时，dayno之间的距离不仅会增加（这就是我们想要的），而且每个dayno本身都会被拉长，因为没有办法告诉SVG缩放机制不要这样做（尽管有这样的机制来对矢量对象执行）。

我能看到的唯一方法就是每次重新缩放图形时都会从头开始重新生成整个tlineobj，这似乎是一种非常流行的方式（或者我可以浏览所有dayno个对象并更改其中的某些属性，但这同样糟糕。）

如何避免在svg中缩放文本

0 个答案: