Как оживить линию SVG от центральной точки?

Question

У меня есть следующая вертикальная линия в качестве элемента svg (созданного с помощью Inkscape), теперь я хотел бы, чтобы он рисовал себя из центра, а не сверху вниз или снизу вверх.

    <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="48.136105mm"
   height="79.598999mm"
   viewBox="0 0 48.136105 79.598999"
   version="1.1"
   id="bluetoothIconSvg"
   inkscape:version="0.92.2 5c3e80d, 2017-08-06"
   sodipodi:docname="bluethood-break-apart-icon.svg">
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-33.604957,-76.75465)">
    <path
       style="fill:none;
       stroke:#000000;
       stroke-width:1px;
       stroke-linecap:butt;
       stroke-linejoin:miter;
       stroke-opacity:1"
       d="M 49.924165,76.866652 V 156.24165"
       id="path4508"
       inkscape:connector-curvature="0" />
  </g>
</svg>

Также, используя обычный html элемент, такой как <div> или <span>, этого можно легко достичь, например, так ЗДЕСЬ . Но я хотел бы добиться того же, используя svg.

Answer 1

Я анимирую ваш путь, хотя я удалил преобразование и изменил viewBox, потому что хотел увидеть путь отверстия. Вы можете использовать то, что у вас есть.

Я использую анимацию SMIL, но вы можете использовать ту же идею для ее анимации, используя css.

В моем коде 79,375 - это общая длина тропинка. Вы можете получить общую длину пути, используя getTotalLength().

39,69 - это половина общей длины.

Основная идея такова: я анимирую stroke-dasharray из штрихов = 0 пробелов = 79,375 до пробелов = 0 штрихов = 79,375

Также я анимирую смещение штрих-тире от = "- 39,69" до = "0"

svg{width:50px; border:1px solid silver;}

 <svg 
   viewBox="40 70 48.136105 95"
   >
  <g>
    <path
       style="fill:none;
       stroke:#000000;
       stroke-width:1px;
       stroke-linecap:butt;
       stroke-linejoin:miter;
       stroke-opacity:1"
       d="M 49.924165,76.866652 V 156.24165"
       id="path4508"
       stroke-dasharray="79.375 0"
       stroke-dasharray="-39.69"
          >
       <animate   attributeName="stroke-dasharray"
       attributeType="XML"
       from="0 79.375" to="79.375 0" 
       dur="5s"
       repeatCount="indefinite"  /> 
       <animate   attributeName="stroke-dashoffset"
       attributeType="XML"
       from="-39.69" to="0"
       dur="5s"
       repeatCount="indefinite"  /> 
      
          </path>
  </g>
</svg>