Как рассчитать постепенную округленную границу по пути в SVG

Question

Я пытаюсь создать путь, следующий за линейной изогнутой границей в SVG. Немного как это:

мне было интересно, как это может быть вычислен в синтаксисе пути SVG? Я пробовал некоторые варианты, но нигде не было близко.

Для записи я использую Raphael.js - но вопрос носит общий характер, так как Raphael не обертывает API вокруг объявления пути svg.

Answer 1

Для этого вам нужен elliptical arc curve command.

var paper = Raphael(0, 0, 500, 500); 
var rx = 35, 
    ry = 25; 
var path = "M20,20v100a" + rx + "," + ry + " 90 0,0 " + ry + "," + rx; 
paper.path(path); 

fiddle

метод Рафаэля .rect() позволяет радиус для углов, а если вам нужно сделать прямоугольник.