svg - corner not sharp as expected

user_1914781 0
Viewed 40

When I try to draw a shape with svg, the corner looks like not sharp as expected! The header corner looks awesome, but the other two looks like not sharp!

I am using d3.js to draw it!

var width = 600
  var height = 600
  var svg = d3.select('body')
  .append('svg')
  .attr('width',width)
  .attr('height',height)
  //.style('border','1px solid red')
  .attr('viewBox',`0 0 15 15`)

  var g = svg.append('g')
  .attr('fill','none')
  .attr('stroke', 'red')
  .attr('stroke-width',1)
  
  var path = ['M',10,6,2,2,5,6,2,10,'z'].join(' ')
   g.append('path')
    .attr('d', path)
    .attr('stroke', 'red')
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>

d3.js svg
1 Answers

The property stroke-miterlimit controls this. Its default value is 4 but you can use a larger value if that's appropriate to what you're doing..

var width = 600
  var height = 600
  var svg = d3.select('body')
  .append('svg')
  .attr('width',width)
  .attr('height',height)
  //.style('border','1px solid red')
  .attr('viewBox',`0 0 15 15`)

  var g = svg.append('g')
  .attr('fill','none')
  .attr('stroke', 'red')
  .attr('stroke-width',1)
  
  var path = ['M',10,6,2,2,5,6,2,10,'z'].join(' ')
   g.append('path')
    .attr('d', path)
    .attr('stroke-miterlimit', 10)
    .attr('stroke', 'red')
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>

user_10380150
Related