Question 43063 in Html Question posted in
Some basic documentation can be found here.

SVG Dotted border style using <path> element – Html

I am trying to add dotted border style for the below SVG using <path> element instead of <style> attribute. But, the SVG output does not match the output when using the <style> attribute.

Expected Output (SVG using <style> attribute):

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100" width="200" style="border:3px dotted #ff0000 !important;background-color:#ccffff;">
</svg>

Actual Output (SVG using <path> element):

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100" width="200">
    <path d="M0,0 h200 v100 h-200 Z" fill="#ccffff" stroke-width="6" stroke="#ff0000" stroke-dasharray="3" />
</svg>

If you notice the Actual SVG output, there are some differences which are mentioned below.

  • Corner edges are not matching the Expected SVG output
  • Border dashes are not round as seen in the Expected SVG output, if you zoom more than 200%

How do I fix the SVG using <path> to match the SVG output using <style>?

Tags:

2

Answers


  1. 0

    I think the closest you’ll get is doesn’t use a single path (I haven’t figured out the exact #s for a 1 to 1 match)

    Use stroke-linecap="round" to give the rounded edge. Change stroke-width="2.75", fill="none", stroke-dasharray="0 6", and d="M1.375,1.375 h197.25 v97.25 h-197.25 Z". Finally add the fill <path d="M0,0 h200 v100 h-200 Z" fill="#ccffff" />

    Line info: M<stroke-width / 2>,<stroke-width / 2> h<200 - stroke-width> v<100 - stroke-width> h-<200 - stroke-width> Z

    Original

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100" width="200" style="border:3px dotted #ff0000 !important;background-color:#ccffff;">
</svg>

    Dashed round

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100" width="200">
    <path d="M0,0 h200 v100 h-200 Z" fill="#ccffff" />
    <path d="M1.5,1.5 h197 v97 h-197 Z" stroke-width="3" fill="none" stroke="#ff0000" stroke-dasharray="0 6" stroke-linecap="round" />
</svg>
    Login or Signup to reply.
  2. 0

    A couple of things – you’re drawing the path at the edge of the SVG, so half the stroke is outside the drawable area. You want to move your start location (M) to adjust for your stroke width, and shorten the drawing lengths to keep everything inside the SVG area.

    Then you want to match your stroke-array with your stroke-width and set the stroke-offset so that you’re drawing the first dash at the draw origin. And if you want a rounded stroke, set stroke-join= "round".

    Now it looks right.

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100px" width="200px">
    <path d="M5,5 h190 v90 h-190 Z" fill="#ccffff" stroke-width="5" stroke="#ff0000" stroke-dasharray="5" stroke-dashoffset="2.5"  stroke-linejoin="round"/>
</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search