SVG：以百分比单位表示的y属性行不受viewBox的影响

似乎以百分比指定SVG线的线坐标会使该坐标存在于视口坐标系中，而不是由viewBox建立的用户坐标系中。对我来说，这听起来很奇怪，尤其是在阅读了说明书之后。 在下面的示例中，绿线由用户空间坐标定义，而蓝线的y坐标以百分比单位（50%）表示。单击按钮时，将应用视图框-绿线将正确缩放，而蓝线将不。。。那里发生了什么事？
报告说： 对于以SVG视口百分比表示的任何y坐标值或高度值，要使用的值必须是应用于该视口的“viewBox”高度参数的百分比（以用户单位为单位）。如果未指定“viewBox”，则要使用的值必须是SVG视口高度的百分比（以用户单位为单位）

更新：我对svg中的所有元素进行了分组，并提供了transform=“scale（0.5 0.5）”和百分比坐标。我开始怀疑viewBox只转换以用户单位而不是显式单位指定的坐标。但我认为不应将百分比视为一个明确的单位，因为它不是真正的物理值。这将与上面的规范摘录相矛盾。那是什么呢

函数myFunction（）{
document.getElementById（“maxi”）.setAttribute（“viewBox”、“0,0492124”）；
}

---

我没有看到你描述的行为有任何异常。请参阅

蓝线位于SVG的（垂直）中心，因为其Y坐标表示为50%。当viewBox更改值时，这不受影响。只有其X值以绝对值表示，因此当viewBox显式显示时，该线将减半

当在坐标系发生变化时单击按钮时，绿线在X轴和Y轴上发生位移（在您的示例中为倍增），其坐标以绝对值表示

我改变了颜色和笔划宽度，以便更清楚地了解发生了什么。为了清晰起见，我还注释了您的路径，并在SVG周围添加了一个（点）边框。我还添加了一个方便的重置按钮：

function reset() {
  document.getElementById("maxi").removeAttribute("viewBox");
}

---

这正是我所不理解的。正如我所看到的（显然是错误的）当视图框改变坐标系时-50%也应该调整到视图框的大小。。。你能解释一下为什么不应该。谢谢你有两种方法来指定每个形状的坐标。当你将一个维度表示为50%时，你会说，“我希望这个宽度/高度是整个SVG的一半。”当你将它表示为232这样的数字时，你会说，“在viewBox属性定义的坐标系中，这个维度是这些单位的232。”我必须承认，我发现您的方法非常不寻常，因为您最初没有指定viewBox。你到底想创造什么？谢谢，MSC，我现在明白了。我在我的站点的两个地方使用相同的SVG。一旦放大，第二次缩小，如缩略图。因此，动态vewBox。使用y=“50%”的原因是我有许多不同的SVG，我通过每个SVG中的代码来画这条线。我认为将y坐标表示为50%，而不处理BBox和计算我使用的每个SVG的中间部分会更干净。我在考虑使用一个带有viewBox（0,0100100）的内部SVG，将坐标作为百分比，并使用一个外部SVG实际收缩整个SVG，它会工作吗？根据您所描述的，您不能只使用“”？这将适合任何容器（如包装袋）并按比例缩放。由于这只是一个注释，除非您创建一个单独的新问题，否则我无法轻松共享其他代码。关于如何解决我的原始问题，我产生了一个不同的问题。如果您能看一看，我将不胜感激，谢谢