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

Question

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

更新：我将 svg 中的所有元素分组并提供了 transform="scale(0.5 0.5)" 并且百分比坐标按预期工作。我开始怀疑 viewBox 只转换以用户单位指定的坐标，而不是以显式单位指定的坐标。但我认为百分比不应被视为一个明确的单位，因为它并不是真正的物理价值。它会与上面的规范摘录相矛盾。那是什么？

function myFunction(){
 document.getElementById("maxi").setAttribute("viewBox","0,0,492,124");

}

<svg id="maxi" version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px"  width="246" height="62" font-size="23px" xml:space="preserve" >

   <line id="greenline" x1="0" y1="31" x2="232" y2="31" stroke="#00FF00" stroke-width="4"/>
      <line id="blueline" x1="0" y1="50%" x2="232" y2="50%" stroke="#0000FF"/>

            <path class="cutContour" fill="none" stroke="#EC008C" stroke-miterlimit="3.8637" d="M6.8,2.3H225
    c2.3,0,4.3,1.9,4.3,4.3v48.2c0,2.3-1.9,4.3-4.3,4.3H6.8c-2.3,0-4.3-1.9-4.3-4.3V6.6C2.5,4.2,4.4,2.3,6.8,2.3z"/>

</svg>
<input type="button" value="Click Me" onClick="myFunction();">

Answer 1

我没有发现您所描述的行为有任何异常。请参阅 https://codepen.io/MSCAU/pen/JapPQd.

处的 Codepen

蓝线位于 SVG 的（垂直）中心，因为它的 Y 坐标表示为 50%。当 viewBox 改变值时，这不受影响。只有它的 X 值以绝对值表示，因此当 viewBox 明确时，该行会减半。

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

我更改了颜色和描边宽度，以便更清楚地了解发生了什么。为了清楚起见，我还注释掉了您的 PATH 并在 SVG 周围放置了一个（虚线）边框。我还添加了一个方便的重置按钮：

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

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

SVG : line with y attribute expressed in percentage units does not get affected by viewBox

svg

viewbox