使用stroke-dasharray從SVG的一側刪除筆觸

Question

我想知道除了星星的右側（也許使用stroke-dasharray ）之外，有沒有辦法在周圍都有邊框（或筆划）？

SVG：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="SvgDefinitions">
  <defs>
    <symbol id="HalfStar" viewBox="0 0 20 19">
      <path d="M9,0.6L6.5,5.7L0.9,6.5c-0.2,0-0.4,0.1-0.6,0.3c-0.4,0.4-0.4,1,0,1.4l4.1,4l-1,5.6c0,0.2,0,0.4,0.1,0.6 c0.3,0.5,0.9,0.7,1.4,0.4l5.1-2.7l0,0V0C9.6,0,9.2,0.2,9,0.6z" />
    </symbol>
  </defs>
</svg>

<svg class="Star-Container">
  <use href="#HalfStar" x-link:href="#HalfStar" />
</svg>

CSS：

#HalfStar {
  stroke: red;
  stroke-dasharray: 5,4;
}

代碼筆： https ://codepen.io/amir734jj/pen/zYqWZRN

Answer 1

使用getTotalLength()測量的半邊星形輪廓的總長度為 - 50px
星星的豎線長度是 - 16px對於這個段， stroke-dasharray =" 0 16 " ，其中0是筆畫的長度16是空格的長度

因此，應填充筆划的星星區域為34px

對於 5 組筆畫和空格 - 34/10 = 3,4px

因此，通用公式將是：

stroke-dasharray="3.4,3.4 3.4,3.4 3.4,3.4 3.4,3.4 3.4,3.4 0, 16"   

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="SvgDefinitions"> <defs> <symbol id="HalfStar" viewBox="0 0 20 19"> <path stroke="red" stroke-dashoffset="0" stroke-dasharray="3.4,3.4 3.4,3.4 3.4,3.4 3.4,3.4 3.4,3.4 0, 16" d="M9,0.6L6.5,5.7L0.9,6.5c-0.2,0-0.4,0.1-0.6,0.3c-0.4,0.4-0.4,1,0,1.4l4.1,4l-1,5.6c0,0.2,0,0.4,0.1,0.6 c0.3,0.5,0.9,0.7,1.4,0.4l5.1-2.7l0,0V0C9.6,0,9.2,0.2,9,0.6z" /> </symbol> </defs> </svg> <svg class="Star-Container"> <use href="#HalfStar" x-link:href="#HalfStar" /> </svg>

@NodeJS 通過評論

有沒有辦法讓邊界在其余部分連續而不是虛線？

為此，請在最后一組參數stroke-dasharray交換 0, 16 x 16, 0

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="SvgDefinitions"> <defs> <symbol id="HalfStar" viewBox="0 0 20 19"> <path stroke="red" stroke-dashoffset="3" stroke-dasharray="3.4,3.4 3.4,3.4 3.4,3.4 3.4,3.4 3.4,3.4 16,0" d="M9,0.6L6.5,5.7L0.9,6.5c-0.2,0-0.4,0.1-0.6,0.3c-0.4,0.4-0.4,1,0,1.4l4.1,4l-1,5.6c0,0.2,0,0.4,0.1,0.6 c0.3,0.5,0.9,0.7,1.4,0.4l5.1-2.7l0,0V0C9.6,0,9.2,0.2,9,0.6z" /> </symbol> </defs> </svg> <svg class="Star-Container"> <use href="#HalfStar" x-link:href="#HalfStar" /> </svg>

@Apha 通過評論

您的解決方案在左側沒有連續邊框。 破了我認為 OP 希望左側有連續邊框，右側沒有邊框

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="SvgDefinitions"> <defs> <symbol id="HalfStar" viewBox="0 0 20 19"> <path stroke="red" stroke-dashoffset="0.75" stroke-dasharray="33.5,0 0,16.5" d="M9,0.6L6.5,5.7L0.9,6.5c-0.2,0-0.4,0.1-0.6,0.3c-0.4,0.4-0.4,1,0,1.4l4.1,4l-1,5.6c0,0.2,0,0.4,0.1,0.6 c0.3,0.5,0.9,0.7,1.4,0.4l5.1-2.7l0,0V0C9.6,0,9.2,0.2,9,0.6z" /> </symbol> </defs> </svg> <svg class="Star-Container"> <use href="#HalfStar" x-link:href="#HalfStar" /> </svg>