Как я могу получить процентную длину строки в SVG с помощью штрих-черточки? - PullRequest
Новая
       25

Как я могу получить процентную длину строки в SVG с помощью штрих-черточки?

2 голосов
/ 31 марта 2020

Я пытаюсь добиться эффекта на основе границы в процентах для прямоугольного элемента SVG, как показано на рисунке ниже. Мне посоветовали, что для этого мне нужно использовать stroke-dasharray, но, несмотря на то, что я играю с JSFiddle, я не смог найти решения, которое бы универсально работало для SVG любой высоты и ширины. Буду признателен за любую помощь или совет.

Вот то, с чем я сейчас играю в JSFiddle: 

<html>
  <body>
    <div>
      <svg>
        <rect
          x="10"
          y="10"
          rx="10"
          ry="10"
          height="48"
          width="48"
          stroke-dasharray="50% 100%"
          style="stroke: black; fill: none;"
        />
      </svg>
    </div>
  </body>
</html>

Изображение желаемой функциональности

1 Ответ

2 голосов
/ 31 марта 2020

Как прокомментировал @enxaneta, общую длину пути можно найти с помощью метода getTotalLength() 

<html>
  <body>
    <div>
	<input  type="button" value="Total"  onclick="TotalLength()"/>
      <svg width="20%" height="20%" viewBox="0 0 60 60">
        <rect id="rect"
          x="10"
          y="10"
          rx="10"
          ry="10"
          height="48"
          width="48"
          style="stroke: black; fill: none;"
        />
      </svg>
    </div> 
	<script>
	 function TotalLength(){
          var path = document.querySelector('#rect');
        var len = (path.getTotalLength() );
        alert("Path length - " + len);
        };
	 
	</script>
  </body>
</html>

Общая длина пути: 174.42px

Атрибут stroke-dasharray является атрибутом представления, определяющим шаблон штрихов и разрывов, используемых для рисования контура фигуры;

При заполнении фигуры на 64% мы рассчитываем длину хода: 174.42 * 0.64 = 111.62

длина зазора: 174.42 * 0.36 = 62.79 штрих-черта = 111.62, 62.79 

<html>
  <body>
    <div>
	  <svg width="20%" height="20%" viewBox="0 0 60 60">
        <rect id="rect"
          x="10"
          y="10"
          rx="10"
          ry="10"
          height="48"
          width="48"
          stroke-dasharray="111.62, 62.79"
          style="stroke: black; fill: none;"
        /> 
		  <text x="20" y ="40" font-size="16px" > 64% </text>
      </svg>
    </div> 
	
  </body>
</html>
...