使用stroke-dasharray从SVG的一侧删除描边

问题描述

我想知道是否有一种方法可以在星星的右侧（可能使用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,1.4l4.1,4l-1,5.6c0,0.2,0.4,0.1,0.6 c0.3,0.5,0.9,0.7,1.4,0.4l5.1-2.7l0,0V0C9.6,9.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;
}

CodePen：https://codepen.io/amir734jj/pen/zYqWZRN

解决方法

用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 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,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,1.4l4.1,4l-1,5.6c0,0.2,0.4,0.1,0.6 c0.3,0.5,0.9,0.7,1.4,0.4l5.1-2.7l0,0V0C9.6,9.2,9,0.6z" />
    </symbol>
  </defs>
</svg>

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

@NodeJS评论

有没有办法使其余部分的边界连续而不是 破了？

要执行此操作，请在最后一组参数stroke-dasharray中将0、16乘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 16,0" 
     d="M9,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.6z" />
    </symbol>
  </defs>
</svg>

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