Can SVG designs be made to look uniform when applied to sharp corners using stroke-dasharray?

Question

Can SVG designs be made to look uniform when applied to sharp corners using stroke-dasharray?

In my current project, I am developing an interactive application that allows for direct manipulation of shapes through SVG. To illustrate a specific issue, let's take a look at how a star is rendered in Chrome.

When experimenting with different values of stroke-dasharray, it becomes evident that the strokes on the arms of this star appear inconsistent. Some edges are blunt while others are sharp. Although adjusting stroke-linejoin can change the appearance of the star, it does not completely address the inconsistency across all arms.

<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg"> 
  <polygon stroke="red"
           stroke-width="20"
           stroke-dasharray="5 5"
           points="350,75  379,161 469,161 397,215
                      423,301 350,250 277,301 303,215
                      231,161 321,161" />
</svg>

https://i.sstatic.net/1Glil.png

While adjusting each arm's stroke using stroke-dashoffset might achieve consistency in this scenario, it seems challenging to make sharp turns in strokes appear consistent in a more general context considering how stroke-dasharray operates. However, there is pressure from my team to find a solution to ensure consistency in stroke appearance, so I need to explore this further.

Therefore, I want to confirm: Is there a universal solution to ensure strokes appear consistent around sharp corners when utilizing stroke-dasharray?

css dom svg

Answer 1

Answer №1

UPDATE: This unique approach is now compatible with svg <path> elements, including curved segments, in addition to <polygon> elements. With some adjustments, it may be possible to use this strategy for various SVG shapes, although the demonstration focuses on polygons and paths.

Polygons Implementation (no polyfills needed)

The provided function enables you to dynamically calculate the necessary dash and gap lengths, applying them as a stroke-dasharray to a polygon element. Furthermore, it allows you to opt for dashes at ALL corners or NO corners of the shape.

https://i.sstatic.net/Q2BGQ.png

For each line segment of the polygon, the function computes the length of the segment, calculates the number of required dashes to start and end the segment with half-length gaps, determines the exact dash length, and generates the appropriate stroke-dasharray of dashes and gaps. For example, if there is space for 3 dashes of length d (equivalent to 6 dashes/gaps), the stroke-dasharray would be d/2 d d d d d d/2. This results in starting and ending the line segment with half-dashes.

Repeat this process for each edge, combining the last half-length dash of one edge with the first half-length dash of the next edge.

The function also provides an option to set the noneFlag to true (default is false), converting the stroke from having dashes at all corners to having dashes at no corners.

Refer to the code snippet below for the implementation details. Regarding Paths Usage (requires polyfill as of mid-February 2017) The existing strategy cannot be directly applied to path elements due to their ability to include both straight edges and curves. Adapting this strategy for path elements involves calculating the lengths of path segments and performing similar calculations as done for straight polygon edges but tailored for each type of path segment. While there are challenges transitioning between the older deprecated `pathSegList` API and the upcoming `getPathData` API, utilizing polyfills can bridge this gap. The provided code illustrates usage with paths using these APIs. Explore the attached images demonstrating the application of the strategy on paths.

Answer 2

UPDATE: This unique approach is now compatible with svg <path> elements, including curved segments, in addition to <polygon> elements. With some adjustments, it may be possible to use this strategy for various SVG shapes, although the demonstration focuses on polygons and paths.

Polygons Implementation (no polyfills needed)

The provided function enables you to dynamically calculate the necessary dash and gap lengths, applying them as a stroke-dasharray to a polygon element. Furthermore, it allows you to opt for dashes at ALL corners or NO corners of the shape.

https://i.sstatic.net/Q2BGQ.png

For each line segment of the polygon, the function computes the length of the segment, calculates the number of required dashes to start and end the segment with half-length gaps, determines the exact dash length, and generates the appropriate stroke-dasharray of dashes and gaps. For example, if there is space for 3 dashes of length d (equivalent to 6 dashes/gaps), the stroke-dasharray would be d/2 d d d d d d/2. This results in starting and ending the line segment with half-dashes.

Repeat this process for each edge, combining the last half-length dash of one edge with the first half-length dash of the next edge.

The function also provides an option to set the noneFlag to true (default is false), converting the stroke from having dashes at all corners to having dashes at no corners.

Refer to the code snippet below for the implementation details. Regarding Paths Usage (requires polyfill as of mid-February 2017) The existing strategy cannot be directly applied to path elements due to their ability to include both straight edges and curves. Adapting this strategy for path elements involves calculating the lengths of path segments and performing similar calculations as done for straight polygon edges but tailored for each type of path segment. While there are challenges transitioning between the older deprecated `pathSegList` API and the upcoming `getPathData` API, utilizing polyfills can bridge this gap. The provided code illustrates usage with paths using these APIs. Explore the attached images demonstrating the application of the strategy on paths.

Answer 3

Answer №2

When dealing with a complex polyline with segments of varying lengths, achieving a uniform dashed line effect is not a simple task.

In theory, it can be done by meticulously creating a dash pattern that matches the total length of the polyline and lists each segment individually. However, this approach would result in extremely lengthy dash patterns, making it impractical. Furthermore, such custom dash patterns would need to be generated for each unique polyline.

<svg width="400" height="400">
  
  <polygon points="50,100, 200,300, 350,300, 350,100"
           stroke="red" stroke-width="30"
           stroke-dasharray="50 50 50 50
                             100
                             50
                             90
                             40 40 40
                             100
                             60 60 60 60 0"/>
  
</svg>

Answer 4

When dealing with a complex polyline with segments of varying lengths, achieving a uniform dashed line effect is not a simple task.

In theory, it can be done by meticulously creating a dash pattern that matches the total length of the polyline and lists each segment individually. However, this approach would result in extremely lengthy dash patterns, making it impractical. Furthermore, such custom dash patterns would need to be generated for each unique polyline.

<svg width="400" height="400">
  
  <polygon points="50,100, 200,300, 350,300, 350,100"
           stroke="red" stroke-width="30"
           stroke-dasharray="50 50 50 50
                             100
                             50
                             90
                             40 40 40
                             100
                             60 60 60 60 0"/>
  
</svg>

Answer 5

Answer №3

One potential solution involves utilizing markers to mask any drawing inconsistencies. Here is an exaggerated example:

<svg width="900" height="700" xmlns="http://www.w3.org/2000/svg"> 
  <defs>
     <marker id="blue-square"
      viewBox="0 0 15 15" refX="7" refY="7" orient="auto" >
         <rect fill="blue" x="5" y="5" width="10" height="10"/>
      </marker>
    
  </defs>
  <polygon filter="url(#testthis)" stroke="blue"
           stroke-width="25"
           stroke-dasharray="8 8"
           points="450,85  379,171 459,161 387,225
                      433,301 350,260 297,291 333,205
                      261,151 341,135" 
                      marker-mid="url(#blue-square)"                                           
                      marker-end="url(#blue-square)"/>
</svg>

Answer 6

One potential solution involves utilizing markers to mask any drawing inconsistencies. Here is an exaggerated example:

<svg width="900" height="700" xmlns="http://www.w3.org/2000/svg"> 
  <defs>
     <marker id="blue-square"
      viewBox="0 0 15 15" refX="7" refY="7" orient="auto" >
         <rect fill="blue" x="5" y="5" width="10" height="10"/>
      </marker>
    
  </defs>
  <polygon filter="url(#testthis)" stroke="blue"
           stroke-width="25"
           stroke-dasharray="8 8"
           points="450,85  379,171 459,161 387,225
                      433,301 350,260 297,291 333,205
                      261,151 341,135" 
                      marker-mid="url(#blue-square)"                                           
                      marker-end="url(#blue-square)"/>
</svg>

Can SVG designs be made to look uniform when applied to sharp corners using stroke-dasharray?

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to change the size of a background image

Ways to ensure a div is positioned beneath another div

Issue with local file directory

What is the formula to determine the sizes of grandchildren div containers?

What is the best way to create spacing between images in a CSS image slider?

What are the recommended web-safe colors to use for styling an <hr> element?

What is the method for incorporating a link in an accordion header next to the toggle button with Bootstrap?

Is it possible to disable the pointer event on the parent element only in CSS

JavaScript appends a backslash character to a CSS class

Increase the border at the bottom while hovering with React.js and the Material UI library

Is there a way to use jQuery to make a div fade in and toggle over another

How can jQuery be utilized to dynamically update the text in a navbar?

Navigating Your Way Through the Center (ASP.NET MVC)

How can I properly save a PNG image with alpha transparency to be compatible with IE6?

Align the h2 header vertically within a div container

Fix a carousel layout problem

Upgrade your input button style using jQuery to swap background images

Are the dimensions of <TD> and <table> not displaying properly?

Angular Markdown Styling: A Guide

What are some effective methods for overriding materialui styles?