我不确定如何在SVG中绘制一个空心圆圈。在SVG中绘制一个空心圆圈
我想要一个充满了颜色,然后有黑色轮廓的环形。
我想这样做的方式有两个圆圈,一个半径小于另一个。问题是当我填充它们时,我如何让小圆圈采用与它所处的相同的填充颜色?
我不确定如何在SVG中绘制一个空心圆圈。在SVG中绘制一个空心圆圈
我想要一个充满了颜色,然后有黑色轮廓的环形。
我想这样做的方式有两个圆圈,一个半径小于另一个。问题是当我填充它们时,我如何让小圆圈采用与它所处的相同的填充颜色?
只需使用fill="none"
,然后只绘制stroke
(大纲)。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="none" />
</svg>
或者这样,如果你想两种颜色:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
<circle cx="100" cy="50" r="39" stroke="red" stroke-width="2" fill="none" />
</svg>
这是经典的甜甜圈形状 我不知道,如果你想使用标准的SVG或者JavaScript来生成SVG 目标可以通过包括相对的“moveTo”命令,在一个单一的路径定义
转到这里 http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2
而且点击的互动的例子右侧的“甜甜圈洞”来实现。 至少你可以看到制作红色甜甜圈的路径定义。
谢谢,这有助于。这确实是一种痛苦(并且外部笔画大约是一个单元从关闭,这在我的书中是没有问题的),但是我想出了从任意中心点以及外部和内部半径环形成的语法这个 – MDragon00
感谢Chasbeen,我想出了如何在SVG中制作真正的戒指/甜甜圈。请注意,外圈实际上并未关闭,这只有在使用笔触时才会显现。当你有许多同心环时非常有用,特别是如果它们是交互式的(比如说,使用CSS悬停命令)。
对于平局命令
M cx, cy // Move to center of ring
m 0, -outerRadius // Move to top of ring
a outerRadius, outerRadius, 0, 1, 0, 1, 0 // Draw outer arc, but don't close it
Z // default fill-rule:even-odd will help create the empty innards
m 0 outerRadius-innerRadius // Move to top point of inner radius
a innerRadius, innerRadius, 0, 1, 1, -1, 0 // Draw inner arc, but don't close it
Z // Close the inner ring. Actually will still work without, but inner ring will have one unit missing in stroke
JSFiddle - 包含几个戒指和CSS来模拟交互性。请注意缺点是在起点(顶部)缺少一个像素,如果您在上面添加笔划,则只有该像素存在。
编辑: 发现这个SO answer(更好的是,this answer),它描述了如何让空内脏一般
这个答案很棒!如果你希望环的内部不响应悬停事件,这一点非常重要! –
MDragon00的答复工作,但内,外圈并不完全一致(例如居中)。
我稍微修改了他的方法,使用了4个半圆弧(2个外部和2个内部方向相反)来完全对齐。
<svg width="100" height="100">
<path d="M 50 10 A 40 40 0 1 0 50 90 A 40 40 0 1 0 50 10 Z M 50 30 A 20 20 0 1 1 50 70 A 20 20 0 1 1 50 30 Z" fill="#0000dd" stroke="#00aaff" stroke-width="3" />
</svg>
<!--
Using this path definition as d:
M centerX (centerY-outerRadius)
A outerRadius outerRadius 0 1 0 centerX (centerY+outerRadius)
A outerRadius outerRadius 0 1 0 centerX (centerY-outerRadius)
Z
M centerX (centerY-innerRadius)
A innerRadius innerRadius 0 1 1 centerX (centerY+innerRadius)
A innerRadius innerRadius 0 1 1 centerX (centerY-innerRadius)
Z
-->
这里有一个程序来创建贝塞尔弧线尽可能接近都没有什么圆。你需要四条路径才能完成一个圆圈。
BezierCurve BezierArc(double ox, double oy, double r, double thetaa, double thetab)
{
double theta;
double cpx[4];
double cpy[4];
int i;
int sign = 1;
while (thetaa > thetab)
thetab += 2 * Pi;
theta = thetab - thetaa;
if (theta > Pi)
{
theta = 2 * Pi - theta;
sign = -1;
}
cpx[0] = 1;
cpy[0] = 0;
cpx[1] = 1;
cpy[1] = 4.0/3.0 * tan(theta/4);
cpx[2] = cos(theta) + cpy[1] * sin(theta);
cpy[2] = sin(theta) - cpy[1] * cos(theta);
cpx[3] = cos(theta);
cpy[3] = sin(theta);
cpy[1] *= sign;
cpy[2] *= sign;
cpy[3] *= sign;
for (i = 0; i < 4; i++)
{
double xp = cpx[i] * cos(thetaa) + cpy[i] * -sin(thetaa);
double yp = cpx[i] * sin(thetaa) + cpy[i] * cos(thetaa);
cpx[i] = xp;
cpy[i] = yp;
cpx[i] *= r;
cpy[i] *= r;
cpx[i] += ox;
cpy[i] += oy;
}
return BezierCurve({cpx[0], cpy[0]},{cpx[1], cpy[1]}, {cpx[2], cpy[2]}, {cpx[3], cpy[3]});
}
相当长的功能,以获得与其他答案相同的结果..加上OP想要一个SVG解决方案 – Philip
问题在于它不允许我保留黑色轮廓。我想要一个黑色轮廓的戒指形状。 – luketorjussen
@luketorjussen:对我来说,这只是一个黑色轮廓。如果你想要一个不同的填充颜色,只需要改变填充属性 – rampion
@rampiom:我想要一个给定颜色的圆环,所有颜色都带有黑色轮廓 – luketorjussen