SVG圆angular

我有

<g> <path id="k9ffd8001" d="M64.5 45.5 82.5 45.5 82.5 64.5 64.5 64.5 z" stroke="#808600" stroke-width="0" transform="rotate(0 0 0)" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="#a0a700"></path> <path id="kb8000001" d="M64.5 45.5 82.5 45.5 82.5 64.5 64.5 64.5 z" stroke="#808600" stroke-width="0" transform="rotate(0 0 0)" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="url(#k9ffb0001)"></path> </g> 

在svg中，我需要获得边界右上angular和边界上下半径的效果。 任何人都可以说我该怎么做？

Answer 1

不知道为什么没有人发布实际的SVG答案。 这是一个顶部圆angular（半径3）的SVG矩形：

 <svg:path d="M0,0 L0,27 A3,3 0 0,0 3,30 L7,30 A3,3 0 0,0 10,27 L10,0 Z" /> 

（A），线到（L），线到（A），线到（L），closurespath（Z）。

逗号分隔的数字是绝对坐标。 用额外的参数定义圆弧，圆弧的半径和types。 这也可以用相对坐标来完成（对L和A使用小写字母）。

Answer 2

我知道这个答案很晚，但是为了这个目的，下面是如何用SVG Path创build一个圆形的矩形：

 <path d="M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z" /> 

Expaination：

M100,100： 移动到点（100,100）

h200： 从我们所在的位置绘制200px水平线

a20,20 0 0 1 20,20： 用20px X半径绘制弧线，20px Y半径，顺时针，在X轴线和Y轴线上用20px差值绘制 曲线

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： closurespath

 <svg width="440" height="440"> <path d="M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z" fill="none" stroke="black" stroke-width="3" /> </svg> 

Answer 3

正如我在应用圆angular到path/多边形的答案中所提到的，我已经在JavaScript中编写了一个常规四舍五入的SVGpath的例程，这里有一些例子： http : //plnkr.co/edit/kGnGGyoOCKil02k04snu 。

它将独立于任何你可能有的中风效果。 要使用，请从Plnkr中包含rounding.js文件，然后像这样调用函数：

 roundPathCorners(pathString, radius, useFractionalRadius) 

结果将是圆形path。

结果如下所示：

Answer 4

你已经明确地设置了你的stroke-linejoin ，但是你的stroke-width为0 ，所以你当然不会看到圆angular，如果你没有中风的话。

这里是一个修改的例子，通过笔画创build圆angular。
http://jsfiddle.net/8uxqK/1/

 <path d="M64.5 45.5 82.5 45.5 82.5 64.5 64.5 64.5 z" stroke-width="5" stroke-linejoin="round" stroke="#808600" fill="#a0a700" /> 

否则 – 如果你需要一个实际的圆形填充，而不是一个圆润的脂肪中风，你必须做@Jlange说，做一个实际的圆形。

Answer 5

我也考虑使用一个普通的旧的<rect> ，它提供了rx和ry属性

MDN SVG文档 < – 注意第二个绘制矩形元素

Answer 6

这个问题是谷歌search“圆angularpath”的第一个结果。 Phrogz使用strokebuild议有一些限制（即，我不能将笔画用于其他目的，并且尺寸必须针对笔画宽度进行校正）。

Jlangebuild议使用曲线更好，但不是很具体。 我结束了使用二次贝塞尔曲线绘制圆angular。 考虑这张照片的一个angular落标有一个蓝点和两个红色的点在相邻的边缘：

这两条线可以用L命令来完成。 要将这个尖锐的angular落变成一个圆angular，从左边的红点开始绘制曲线（使用M x,y移动到那个点）。 现在一个二次贝塞尔曲线只有一个控制点，你必须在蓝点上设置。 将曲线的末端设置在红色的右边。 由于两个红色点的切线是在前面的线的方向，你会看到一个stream畅的过渡，“圆angular”。

现在为了在圆angular之后继续形状，可以通过将控制点设置在两个angular之间的线上来实现Bézier曲线中的直线。

为了帮助我确定path，我编写了接受边和半径的Python脚本。 vectormath使这实际上很容易。 输出结果图像：

 #!/usr/bin/env python # Given some vectors and a border-radius, output a SVG path with rounded # corners. # # Copyright (C) Peter Wu <[e-mail]> 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) 

Answer 7

你正在使用一个path元素，为什么不给path一个曲线？ 请参阅这里了解如何使用path元素制作曲线： http : //www.w3.org/TR/SVG/paths.html#PathDataCurveCommands

Answer 8

 <?php $radius = 20; $thichness = 4; $size = 200; if($s == 'circle'){ echo '<svg width="' . $size . '" height="' . $size . '">'; echo '<circle cx="' . ($size/2) . '" cy="' . ($size/2) . '" r="' . (($size/2)-$thichness) . '" stroke="black" stroke-width="' . $thichness . '" fill="none" />'; echo '</svg>'; }elseif($s == 'square'){ echo '<svg width="' . $size . '" height="' . $size . '">'; echo '<path d="M' . ($radius+$thichness) . ',' . ($thichness) . ' h' . ($size-($radius*2)-($thichness*2)) . ' a' . $radius . ',' . $radius . ' 0 0 1 ' . $radius . ',' . $radius . ' v' . ($size-($radius*2)-($thichness*2)) . ' a' . $radius . ',' . $radius . ' 0 0 1 -' . $radius . ',' . $radius . ' h-' . ($size-($radius*2)-($thichness*2)) . ' a' . $radius . ',' . $radius . ' 0 0 1 -' . $radius . ',-' . $radius . ' v-' . ($size-($radius*2)-($thichness*2)) . ' a' . $radius . ',' . $radius . ' 0 0 1 ' . $radius . ',-' . $radius . ' z" fill="none" stroke="black" stroke-width="' . $thichness . '" />'; echo '</svg>'; } ?>