首页 文章

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

提问于
浏览 次
0

似乎以百分比指定SVG线的线坐标使得该坐标存在于视口坐标系中，而不是由viewBox Build 的用户坐标系 . 对我来说这听起来很奇怪，特别是在阅读规格之后 . 在下面的示例中，绿线由用户空间坐标定义，而蓝线的y坐标以百分比单位（50％）定义 . 单击按钮时，将应用viewBox - 绿线正确缩放而蓝线不正常...那里发生了什么？
spec表示：对于以SVG视口的百分比表示的任何y坐标值或高度值，要使用的值必须是应用于该视口的“viewBox”的height参数的百分比（以用户为单位） . 如果未指定“viewBox”，则要使用的值必须是用户单位中SVG视口高度的百分比 .

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

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();">
svg viewbox

1 回答

  • 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");
}
    回复于

相关问题