CODEWITHSUNDEEP
htmlcsssvg
Node.JS
Node.JS

Reputation: 1570

Remove stroke from one side of SVG using stroke-dasharray

I am wondering is there a way have border (or stroke) all around except on the right side of the star (maybe using 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;
}

enter image description here

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

Upvotes: 3

Views: 1273

Answers (1)

Alexandr_TT
Alexandr_TT

Reputation: 14545

The total length of the contour of half of the star measured with getTotalLength() is - 50px
The vertical bar length of the star is - 16px For this segment, stroke-dasharray =" 0 16 " where 0 is the length of the stroke 16 is the length of the space

Therefore, the area of the star that should be filled with strokes is 34px

For 5 groups of strokes and spaces - 34/10 = 3,4px

As a result, the general formula will be:

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 by comment

Is there a way for the border to be continuous for the rest and not dashed?

To do this, swap 0, 16 by 16, 0 in the last group of parameters stroke-dasharray

<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 by comment

Your solution doesn't have a continuous border on the left. It's dashed. I think the OP wanted continuous border on the left and no border on the right

<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>

Upvotes: 3

Related Questions