2

我正在尝试在 SVG rect 元素上实现基于百分比的类似边框的效果，如下图所示。我被告知我需要使用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>

所需功能的图像

4

1 回答 1

2

正如@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 stroke-dasharray =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>

于 2020-03-31T08:32:24.077 回答