如何解决使用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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。