SVG - 在不知道 svg 高度的情况下让线条垂直居中答案

【问题标题】：SVG - have line centered vertically without knowing svg heightSVG - 在不知道 svg 高度的情况下让线条垂直居中
【发布时间】：2018-09-11 18:21:21
【问题描述】：

我在项目中有不同的 SVG。我需要能够以编程方式在每个 SVG 的确切垂直中间添加一个线元素。我尝试将 y1 和 y2 坐标设置为“50%”，但是当 SVG 通过变换比例或 viewBox 进行缩放时，这不会得到尊重。我的其他要求之一是经常缩放这些 SVG。

当然，我可以在每次比例变化时开始计算每个 SVG 的边界框，然后从那里计算垂直输入，但这听起来并不优雅

这个例子只是一些工作。它的线垂直坐标设置为 50%，当设置 viewBox（按钮单击）时，它不被尊重。缩放时蓝线不再位于 SVG 的中间...

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

【问题讨论】：

为什么要改变viewBox？你这样做的目的是什么？
我试图通过它来缩小和放大图像......我开始觉得我需要一本关于 SVG 的好书 :)。建议？
对要缩小和增长的位应用变换。不要将转换应用于您不想移动的行。
我确实希望线路移动。我希望它在图像的每个比例下都保持在可见区域的中间。当我在 y1,y2 坐标上使用 50% 时，当图像缩小和增长时，线条会停留在同一位置，而不是调整到新的中间

标签： svg

【解决方案1】：

如果图像中线条的位置不需要改变 - 换句话说，如果它是静态图像 - 则不需要转换或 viewBox 操作来调整图像大小。您可以改变 SVG 标签本身的 CSS（或 HTML 属性）来调整图像大小。通常将线的坐标表示为绝对值而不是百分比，但是从下面的#line2 可以看出，效果是相同的：

例如（使用 jQuery）：

<style>
svg {
    outline: 1px dotted grey;
    width: 300px;
}   
#shrink {
    display: none;
}   
#line1 {
    stroke: red;
    stroke-width: 5px;
}
#line2 {
    stroke: white;
    stroke-width: 2px;
}
</style>

<p>
  <button id="grow">Grow</button>
  <button id="shrink">Shrink</button>
</p>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-100 0 300 100">
  <line x1="-50" y1="50" x2="150" y2="50" id="line1"/>
  <line x1="-40" y1="50%" x2="140" y2="50%" id="line2"/>
</svg>

<script>
$(function() {

        $('#grow').click(function() {
            $('svg').animate({
                width: "800px"
            }, 500, function() {
                $('#grow').hide();
                $('#shrink').show();
            });
        });

        $('#shrink').click(function() {
            $('svg').animate({
                width: "300px"
            }, 500, function() {
                $('#shrink').hide();
                $('#grow').show();
            });
        });

  });
</script>

Codepen：https://codepen.io/MSCAU/pen/eLMOVj，行后有额外的 CIRCLE 和 RECT。

【讨论】：

【解决方案2】：

我不太确定我明白你在问什么。请看一下并告诉我这是否是您需要的。

function myFunction(){
     let newWidth = 492;
     document.getElementById("maxi").setAttribute("viewBox",`0,0,${newWidth},124`);
     blueline.setAttributeNS(null,"x1", newWidth/2);
     blueline.setAttributeNS(null,"x2", newWidth/2);
     blueline.setAttributeNS(null,"y2", 124);
    }

svg{border:1px solid;}

    <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="123" y1="0" x2="123" y2="62" 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();">

【讨论】：