Радиус границы в SVG d3

#svg #d3.js

Вопрос:

У меня есть следующий svg:

     ` svg.append('g')
       .append("path")
        .attr("d", "M 0 150 L 0 0 L 190 0 L 190 150 Z")
        .attr("fill", "#f6f6f6"); `

Выглядит так:

Но я хочу вот так:

У меня не так много знаний о кривой svg. Как я могу установить такой радиус границы?

Ответ №1:

Сделано с помощью квадратичного пути Безье:

 svg {
  background-color: #aaa;
}

 <svg width="300" height="180">
  <g transform="translate(10,10)">
    <path d="M 60,0 H 180 Q 190,0 190,10 V 140 Q 190,150 180,150 H 10 Q 0,150 0,140 V 60 Q 0,0 60,0 Z" fill="#d6d6d6"/>
  </g>
</svg>

1. Спасибо за ваши усилия. Но я понятия не имею, что здесь происходит, не могли бы вы объяснить или дать мне какое-нибудь руководство, чтобы понять, что такое путь. Потому что мне также нужны svg, такие как верхняя правая граница, Нижняя левая и нижняя правая граница. Я добавил изображения выше. Еще раз спасибо.

2. @AshiqurRahman, только что опубликовал еще один ответ о закруглении углов. Взгляните и удачи вам!

Ответ №2:

Вы можете найти подробное описание пути здесь: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

Самый простой способ завернуть за угол-это квадратичный путь Безье. Например, если вам нужно обогнуть правый верхний угол с приблизительным радиусом r, а координатами угла являются x и y, путь будет выглядеть следующим образом:

Переместитесь в (M) / Линия в (L) / Горизонтальная линия (H) в x — r, y
Квадратичное Безье (Q) к x, y r через x, y
Линия до (L) / Вертикальная линия (V) до следующей точки

Например, если радиус равен 20, а угол находится в точке 100,100, то путь будет равен H 80,100 Q 100,100 100,120 В...

1. Я изучал и смотрел видео с YouTube, но не решил его должным образом. Но мне это очень нужно. Не сделаешь ли ты мне одолжение? Не могли бы вы предоставить мне еще три svg, пожалуйста. Я буду вам очень благодарен. Спасибо.