svg - 角落不像预期的那样尖锐

Question

当我尝试用 svg 绘制形状时，角看起来不像预期的那么锋利！头角看起来很棒，但其他两个看起来并不锋利！

我正在使用 d3.js 来绘制它！

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>

Answer 1

属性stroke-miterlimit控制这一点。它的默认值为 4，但如果适合您的操作，您可以使用更大的值。

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>