Question

似乎以百分比指定SVG线的线坐标会使该坐标存在于视口坐标系中，而不是由viewBox建立的用户坐标系中。对我来说，这听起来很奇怪，尤其是在阅读规格之后。在下面的示例中，绿线由用户空间坐标定义，而蓝线的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

1 个答案: