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>

_{Свободный перевод вопроса svg - corner not sharp as expected от участника @lucky1928.}

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>

_{Свободный перевод ответа от участника @Robert Longson.}

БЛОГ НА HUSL

svg - угол не острый, как ожидалось

Ответы (1 шт):