यह प्रश्न Googling "svg गोल कोनों पथ" के लिए पहला परिणाम है। उपयोग करने के लिए फ्रॉग्ज सुझाव strokeकी कुछ सीमाएँ हैं (अर्थात्, मैं अन्य उद्देश्यों के लिए स्ट्रोक का उपयोग नहीं कर सकता, और यह कि स्ट्रोक की चौड़ाई के लिए आयामों को सही करना होगा)।
वक्र का उपयोग करने के लिए जलेंगे का सुझाव बेहतर है, लेकिन बहुत ठोस नहीं है। मैंने गोल कोनों को खींचने के लिए द्विघात बेज़ियर घटता का उपयोग किया। नीले कोने और आसन्न किनारों पर दो लाल बिंदुओं के साथ चिह्नित कोने के इस चित्र पर विचार करें:
Lकमांड के साथ दो लाइनें बनाई जा सकती थीं । इस तीखे कोने को गोल कोने में बदलने के लिए, बाएं लाल बिंदु से एक वक्र बनाना शुरू करें ( M x,yउस बिंदु पर जाने के लिए उपयोग करें)। अब द्विघात बेयरियर वक्र में केवल एक नियंत्रण बिंदु होता है जिसे आपको नीले बिंदु पर सेट करना होगा। सही लाल बिंदु पर वक्र के अंत को सेट करें। जैसा कि दो लाल बिंदुओं पर स्पर्शरेखा पिछली पंक्तियों की दिशा में है, आप एक धाराप्रवाह संक्रमण, "गोल कोनों" देखेंगे।
गोल कोने के बाद आकार को जारी रखने के लिए, बेज़ियर वक्र में एक सीधी रेखा को दो कोनों के बीच की रेखा पर नियंत्रण बिंदु सेट करके प्राप्त किया जा सकता है।
रास्ता तय करने में मेरी मदद करने के लिए, मैंने यह पायथन स्क्रिप्ट लिखी जो किनारों और एक दायरे को स्वीकार करती है। वेक्टर गणित यह वास्तव में बहुत आसान बनाता है। आउटपुट से परिणामी छवि:
#!/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 में काम नहीं करते हैं।