Bu soru, Googling "svg yuvarlak köşeler yolu" için ilk sonuçtur. Phrogz'un kullanım önerisinin strokebazı sınırlamaları vardır (yani, stroku başka amaçlar için kullanamam ve boyutların strok genişliğine göre düzeltilmesi gerekir).
Bir eğri kullanma önerisi daha iyidir, ancak çok somut değildir. Yuvarlak köşeler çizmek için ikinci dereceden Bézier eğrilerini kullandım. Mavi bir nokta ve bitişik kenarlarda iki kırmızı nokta ile işaretlenmiş şu köşenin resmini düşünün:
LKomut ile iki satır yapılabilir . Bu keskin köşeyi yuvarlak bir köşeye çevirmek için sol kırmızı noktadan bir eğri çizmeye başlayın ( M x,yo noktaya gitmek için kullanın ). Şimdi, ikinci dereceden Bézier eğrisinin mavi noktada ayarlamanız gereken tek bir kontrol noktası vardır. Eğrinin sonunu sağ kırmızı noktada ayarlayın. İki kırmızı noktadaki teğet önceki doğruların yönünde olduğundan, akıcı bir geçiş, "yuvarlak köşeler" göreceksiniz.
Şimdi yuvarlatılmış köşeden sonra şekle devam etmek için, iki köşe arasındaki çizgi arasındaki kontrol noktasını ayarlayarak Bézier eğrisinde düz bir çizgi elde edilebilir.
Yolu belirlememe yardımcı olmak için, kenarları ve yarıçapı kabul eden bu Python betiğini yazdım. Vektör matematiği bunu gerçekten çok kolaylaştırır. Çıktıdan elde edilen görüntü:
#!/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-radiusve türevlerinin SVG'de çalışmaması çok kötü .