이 질문은 인터넷 검색 "svg rounded corners path"에 대한 첫 번째 결과입니다. 사용에 대한 Phrogz 제안 stroke에는 몇 가지 제한 사항이 있습니다 (즉, 다른 용도로 스트로크를 사용할 수 없으며 스트로크 너비에 맞게 치수를 수정해야 함).
곡선을 사용하는 Jlange 제안이 더 좋지만 구체적이지 않습니다. 둥근 모서리를 그리기 위해 2 차 베 지어 곡선을 사용했습니다. 인접한 가장자리에 파란색 점과 두 개의 빨간색 점으로 표시된 모서리 그림을 고려하십시오.
두 줄은 L명령 으로 만들 수 있습니다 . 이 날카로운 모서리를 둥근 모서리로 바꾸려면 왼쪽 빨간색 점에서 곡선 그리기를 시작합니다 (사용 M x,y하여 해당 점으로 이동). 이제 2 차 베 지어 곡선에는 파란색 점에 설정해야하는 단일 제어점이 있습니다. 곡선의 끝을 오른쪽 빨간색 점에 설정합니다. 두 빨간색 점의 접선이 이전 선의 방향이므로 "둥근 모서리"라는 유창한 전환을 볼 수 있습니다.
이제 둥근 모서리 이후의 모양을 계속하려면 두 모서리 사이의 선 사이에 제어점을 설정하여 베 지어 곡선의 직선을 얻을 수 있습니다.
경로를 결정하는 데 도움이되도록 가장자리와 반경을 허용하는이 Python 스크립트를 작성했습니다. 벡터 수학은 실제로 이것을 매우 쉽게 만듭니다. 출력 결과 이미지 :
#!/usr/bin/env python
# Given some vectors and a border-radius, output a SVG path with rounded
# corners.
#
# Copyright (C) Peter Wu <peter@lekensteyn.nl>
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 <path d="..." />
for part in path:
print(part)
border-radius와 그 변형이 SVG에서 작동하지 않는다는 것은 너무 나쁩니다 .