Округленный угол SVG

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

    

Я хочу получить CSS-подобный эффект border-top-right-radius и border-top-bottom-radius .

Как я могу добиться эффекта округленного угла?

Я знаю, что поздно ответить на это, но ради SO вот, как вы можете создать круглый прямоугольник с SVG Path:

  

Объяснение:

m100,100: перейти к точке (100 100)

h200: нарисуйте горизонтальную линию 200px с того места, где мы находимся

a20,20 0 0 1 20,20: нарисуйте дугу с радиусом 20px X, радиус 20px Y, по часовой стрелке, до точки с разницей 20px по оси X и Y

v200: нарисуйте вертикальную линию 200px с того места, где мы находимся

a20,20 0 0 1 -20,20: нарисуйте дугу с радиусом 20px X и Y по часовой стрелке до точки с разницей -20px в X и 20px разницей по оси Y

h-200: нарисовать горизонтальную линию -200px, откуда мы находимся

a20,20 0 0 1 -20, -20: нарисуйте дугу с радиусом 20px X и Y по часовой стрелке до точки с разницей -20px в разнице X и -20px по оси Y

v-200: нарисуйте вертикальную линию -200px, откуда мы

a20,20 0 0 1 20, -20: нарисуйте дугу с радиусом 20px X и Y по часовой стрелке до точки с разницей 20px в X и -20px разницей по оси Y

z: закрыть путь

    

Не уверен, почему никто не опубликовал фактический ответ SVG. Вот прямоугольник SVG с закругленными углами (радиус 3) сверху:

  

Это: Move To (M), Line To (L), Arc To (A), Line To (L), Arc To (A), Line To (L), Close Path (Z).

Числа с разделителями-запятыми являются абсолютными координатами. Дуги определяются дополнительными параметрами, определяющими радиус и тип дуги. Это также может быть выполнено с помощью относительных координат (используйте буквы нижнего регистра для L и A).

Полная ссылка для этих команд находится на странице W3C SVG Paths , а дополнительные справочные материалы по пути SVG можно найти в этой статье .

Как упоминалось в моем ответе на «Применить закругленные углы к путям / полигонам» , я написал рутину в javascript для общих закруглений углов путей SVG с примерами здесь: http://plnkr.co/edit/kGnGGyoOCKil02k04snu .

Он будет работать независимо от любых эффектов удара, которые могут возникнуть у вас. Чтобы использовать, включите файл rounding.js из Plnkr и вызовите функцию следующим образом:

 roundPathCorners(pathString, radius, useFractionalRadius) 

Результатом будет округленный путь.

Результаты выглядят так:

Примеры округления SVG

Вы явно установили, что ваш stroke-linejoin но stroke-width до 0 , поэтому, конечно, вы не увидите закругленные углы, если у вас нет инсульта для раунда.

Вот модифицированный пример с закругленными углами, выполненными с помощью штрихов:
http://jsfiddle.net/8uxqK/1/

  

В противном случае – если вам нужна фактическая закругленная заполненность формы, а не только округлый жирный штрих – вы должны сделать то, что говорит @Jlange, и сделать фактическую округлую форму.

Я также хотел бы использовать простой старый который предоставляет атрибуты rx и ry

MDN SVG docs <- отметить второй обратный прямоугольный элемент

Этот вопрос является первым результатом для Gogling «svg rounded cornerners». Предложение Фрогза об использовании stroke имеет некоторые ограничения (а именно, что я не могу использовать инсульт для других целей и что размеры должны быть исправлены для ширины штриха).

Предложение Jlange использовать кривую лучше, но не очень конкретно. В итоге я использовал квадратичные кривые Безье для рисования округлых углов. Рассмотрим эту картину угла, отмеченного синей точкой и двумя красными точками на соседних краях:

угол фигуры синего цвета с двумя точками на соседних краях

Две строки могут быть выполнены с помощью команды L Чтобы превратить этот резкий угол в закругленный угол, начните рисовать кривую из левой красной точки (используйте M x,y чтобы перейти к этой точке). Теперь квадратичная кривая Безье имеет только одну контрольную точку, которую вы должны установить в синей точке. Установите конец кривой в правой красной точке. Поскольку касательная в двух красных точках находится в направлении предыдущих линий, вы увидите плавный переход, «закругленные углы».

Теперь, чтобы продолжить форму после закругленного угла, прямую линию на кривой Безье можно достичь, установив контрольную точку между линией между двумя углами.

Чтобы помочь мне определить путь, я написал этот скрипт Python, который принимает ребра и радиус. Векторная математика делает это очень легко. Полученное изображение с выхода:

форма, созданная из выходных данных скрипта

 #!/usr/bin/env python # Given some vectors and a border-radius, output a SVG path with rounded # corners. # # Copyright (C) Peter Wu  from math import sqrt class Vector(object): def __init__(self, x, y): self.x = x self.y = y def sub(self, vec): return Vector(self.x - vec.x, self.y - vec.y) def add(self, vec): return Vector(self.x + vec.x, self.y + vec.y) def scale(self, n): return Vector(self.x * n, self.y * n) def length(self): return sqrt(self.x**2 + self.y**2) def normal(self): length = self.length() return Vector(self.x / length, self.y / length) def __str__(self): x = round(self.x, 2) y = round(self.y, 2) return '{},{}'.format(x, y) # A line from vec_from to vec_to def line(vec_from, vec_to): half_vec = vec_from.add(vec_to.sub(vec_from).scale(.5)) return '{} {}'.format(half_vec, vec_to) # Adds 'n' units to vec_from pointing in direction vec_to def vecDir(vec_from, vec_to, n): return vec_from.add(vec_to.sub(vec_from).normal().scale(n)) # Draws a line, but skips 'r' units from the begin and end def lineR(vec_from, vec_to, r): vec = vec_to.sub(vec_from).normal().scale(r) return line(vec_from.add(vec), vec_to.sub(vec)) # An edge in vec_from, to vec_to with radius r def edge(vec_from, vec_to, r): v = vecDir(vec_from, vec_to, r) return '{} {}'.format(vec_from, v) # Hard-coded border-radius and vectors r = 5 a = Vector( 0, 60) b = Vector(100, 0) c = Vector(100, 200) d = Vector( 0, 200 - 60) path = [] # Start below top-left edge path.append('M {} Q'.format(a.add(Vector(0, r)))) # top-left edge... path.append(edge(a, b, r)) path.append(lineR(a, b, r)) path.append(edge(b, c, r)) path.append(lineR(b, c, r)) path.append(edge(c, d, r)) path.append(lineR(c, d, r)) path.append(edge(d, a, r)) path.append(lineR(d, a, r)) # Show results that can be pushed into a  for part in path: print(part) 

Вот несколько путей для вкладок:

https://codepen.io/mochime/pen/VxxzMW

  

Вы используете элемент path, почему бы вам просто не дать путь кривой? См. Здесь, как создавать кривые с использованием элементов пути: http://www.w3.org/TR/SVG/paths.html#PathDataCurveCommands

 '; echo ''; echo ''; }elseif($s == 'square'){ echo ''; echo ''; echo ''; } ?> 
  • Notepad ++ XML Auto Indent + Закрытие тегов
  • Заменить динамический контент в XML-файле
  • Как выбрать узлы XML с пространствами имен XML из XmlDocument?
  • Лучший способ получить InnerXml XElement?
  • Функция замены XSLT не найдена
  • Ресурс Android - массив массивов
  • Сериализация данных частного участника
  • Итерирование атрибутов элементов с помощью jQuery
  • Каков наилучший / самый простой способ чтения в XML-файле в приложении Java?
  • Почему «Данные на корневом уровне недействительны. Строка 1, позиция 1. «для XML-документа?
  • Настройка ведения журнала Hibernate с использованием файла конфигурации XML Log4j?
  • Interesting Posts

    Получите ценность ячейки из листа Excel с помощью Apache Poi

    Как закодировать счетчик для ожидающих процессов в пакетном файле?

    Отображение данных Firebase в ListView

    BOOST ASIO – Как написать консольный сервер

    Солнце и / или тепловой ущерб на задней панели монитора или компьютера

    Как преобразовать данные, полученные через Meteor.publish?

    Spring MVC @PathVariable получает усечение

    Как реализовать «mustMatch» и «selectFirst» в автозаполнении пользовательского интерфейса jQuery?

    Rails 2.3-стиль плагинов и предупреждения о предупреждениях, выполняемые в Heroku

    Лучший способ сделать демон скрипта оболочки?

    Просмотр переименования Java по строковому значению

    WPF / C #: Где я должен сохранять файлы пользовательских настроек?

    EF6.0 “Связь не может быть изменена, поскольку одно или несколько свойств внешнего ключа не могут быть обнулены”

    Лучший дизайн для таблицы базы данных изменений / аудита?

    Веб-сайт ASP.NET или веб-приложение ASP.NET?

    Давайте будем гением компьютера.