SVG-在不知道svg高度的情况下使线垂直居中 [英] SVG - have line centered vertically without knowing svg height

问题描述

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

I have different SVGs in the project. I need to be able to programatically add a line element at the exact vertical middle of each SVG. I tried to set the y1 and y2 coordinates as ‘50%’ but that is not honored when the SVG is scaled either by transform scale or viewBox. One of my other requirements is to have those SVGs scaled often.

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

I could ,of course, start calculating bounding box of each SVG on each scale change, and from there the vertical input but that sounds not elegant

该示例只是需要处理的内容.它具有设置为50％的线垂直坐标，设置viewBox(单击按钮)时不接受.缩放后，蓝线不再位于SVG的中间...

The example is just something to work on. It has a line vertical coordinates set to 50% which are not honoured when a viewBox is set (button click). The blue line is no longer at the middle of the SVG when scaled...

    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标签本身的CSS(或HTML属性)以调整图像大小.通常将直线的坐标表示为绝对值而不是百分比，但是从下面的#line2可以看出，效果是相同的:

If the position of the line in the image doesn't need to vary - in other words if it's a static image - then transforms or viewBox manipulation is not required to resize the image. You can vary the CSS (or HTML attributes) of the SVG tag itself to resize the image. It is common to express the coordinates of the line as absolute values rather than percentages, but as you can see from #line2 below, the effect is identical:

例如(使用jQuery):

For example (with 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 绕线而行.

Codepen: https://codepen.io/MSCAU/pen/eLMOVj with additional CIRCLE and RECT behind the lines.

这篇关于SVG-在不知道svg高度的情况下使线垂直居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！