Question

我在项目中有不同的SVG。我需要能够以编程方式在每个SVG的确切垂直中间添加线元素。我尝试将y1和y2坐标设置为“ 50％”，但是当通过转换比例或viewBox缩放SVG时，这不兑现。我的其他要求之一是经常缩放这些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();">

Answer 1

我不太确定我是否理解您的要求。请看看并告诉我这是否是您需要的。

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

Answer 2

如果图像中线条的位置不需要改变（换句话说，如果它是静态图像），则不需要变换或使用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。

SVG-线垂直居中，不知道svg高度

2 个答案: