Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to maintain the SVG marker width and height ?

Tags:

svg

d3.js

How to maintain the fixed width and height of the SVG marker when changing the stroke-width of the polyline or line or path. Basically what i need is to fix the marker width and height, it should not grow based on the stroke-width of the element.

Below is my code / Editor

<?xml version="1.0"?><svg width="120" height="120" viewBox="0 0 120 120"
    xmlns="http://www.w3.org/2000/svg" version="1.1"><defs>
<marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5"
    markerWidth="6" markerHeight="6" orient="auto">
  <path d="M 0 0 L 10 5 L 0 10 z" />
</marker></defs><polyline points="10,90 50,80 90,20" fill="none" stroke="black" 
  stroke-width="2" marker-end="url(#Triangle)" /></svg>
like image 605
fekky Dev Avatar asked Jan 29 '23 14:01

fekky Dev


1 Answers

Set markerUnits="userSpaceOnUse"

<svg width="120" height="120" viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5" orient="auto"
            markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
  <polyline points="10,90 50,80 90,20" fill="none" stroke="black" 
            stroke-width="3" marker-end="url(#Triangle)" />
  <polyline points="30,100 70,90 110,30" fill="none" stroke="black" 
            stroke-width="1" marker-end="url(#Triangle)" />
</svg>
like image 190
ccprog Avatar answered Feb 05 '23 14:02

ccprog