本文介绍了SVG中的圆形和椭圆形元素的基本语法和特性，包括如何定位、设置半径以及如何通过CSS进行样式调整。文章通过示例展示了如何通过减少元素数量创建复杂的SVG图形，并解释了SVG元素的命中区域与其实际形状相匹配的特点，这对于交互式设计尤其有用。
svg椭圆旋转
While most designers use a visual editor like Adobe Illustrator to create SVG drawings, knowing the basics of SVG syntax can allow you to create elements like lines, circles and rectangles easier and more precisely; in some cases, coding these elements by hand produces work faster than a visual editor ever could.
尽管大多数设计人员都使用Adobe Illustrator之类的可视化编辑器来创建SVG绘图，但了解SVG语法的基础知识可以使您更轻松，更精确地创建线条，圆形和矩形等元素。 在某些情况下，手动编码这些元素所产生的工作比视觉编辑器要快。
界 (Circles)
Let’s look at a basic SVG drawing of a circle; to keep things simple, I’ll leave the possible complications of user units and other variations for another article.
让我们看一个圆的基本SVG图。 为简单起见，我将在另一篇文章中保留用户单元的可能复杂性和其他变体。
You could write this code inside the <body> of an HTML page, or as it’s own document, saved with a .svg extension; either way, the result will be viewable in a browser.
您可以在HTML页面的<body>中或作为自己的文档(以.svg扩展名保存)中编写此代码。 无论哪种方式，结果都可以在浏览器中查看。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
<circle cx="100" cy="100" r="80" fill="red" />
</svg>Which results in:
结果是：
There’s a few things to note immediately:
有几件事要立即注意：
The
circleelement must be “closed inside itself” with a closing slash (/)circle元素必须“内部封闭”并带有斜杠(/)The circle is positioned from its center (
cxfor “center, x-axis”,cyfor “center, y axis”).圆从其中心定位(
cx表示“中心，x轴”，cy表示“中心，y轴”)。The center of the circle is measured from the top left corner of the SVG element.
圆的中心与SVG元素的左上角测量。
The radius (
r) of the circle is, by default, measured in the same units as everything else.默认情况下，圆的半径(
r)的单位与其他单位相同。- If any of these attributes are not defined, they are assumed to be 0 (and for presentational attributes involving color, black). 如果未定义任何这些属性，则将它们假定为0(对于涉及颜色的表示属性，则为黑色)。
The fill of the circle can be specified using any CSS color system you like.
圆的填充可以使用您喜欢的任何CSS颜色系统指定。
Like rectangles and other SVG elements, an SVG circle has two “parts”: an interior fill and an external stroke.
像矩形和其他SVG元素一样，SVG圆具有两个“部分”：内部填充和外部笔触。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
<circle cx="100" cy="100" r="80" fill="red" stroke-width="15" stroke="black" />
</svg>The code for the circle is getting a little long and complicated; let’s clean it up with a class selector:
圆圈的代码变得有些冗长和复杂； 让我们用一个类选择器来清理它：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="80" class="redcirc" />
</svg>And use this CSS:
并使用此CSS ：
svg {
width: 200px; height: 200px;
}
.redcirc {
fill: red;
stroke: black;
stroke-width: 15;
}The result is the same as the previous version:
结果与以前的版本相同：
This does not mean that you suddenly have the ability to apply
fillto HTML elements;fill,strokeandstroke-widthare applicable to SVG elements only. Not every SVG presentational attribute has an equivalent CSS property, but most do.这并不意味着你突然有应用能力
fill到HTML元素 ;fill，stroke和stroke-width仅适用于SVG元素。 并非每个SVG外观属性都具有等效的CSS属性 ，但大多数属性都有。If you’re writing the SVG in the context of an HTML page, the
.redcircclass is equally at home in the<head>of your document or a linked style sheet.如果要在HTML页面的上下文中编写SVG，则
.redcirc类同样位于文档或链接的样式表的<head>中。- The stroke width is spread evenly either side of the element’s outline. 笔划宽度均匀分布在元素轮廓的两侧。
Once we have that, it’s very easy to start creating more complex drawings. I think you can see where we’re going here:
一旦有了这些，就可以开始创建更复杂的图形。 我想您可以看到我们要去的地方：
<svg viewBox="0 0 500 500">
<title>Captain America's Shield</title>
<circle cx="250" cy="250" r="250" fill="red" />
<circle cx="250" cy="250" r="200" fill="white" />
<circle cx="250" cy="250" r="150" fill="red" />
<circle cx="250" cy="250" r="100" fill="blue" />
<polygon fill="white" points="250,150 280,209 346,219 298,265 309,330 250,300 192,330 203,265 155,219 221,209" />
</svg>Note that SVG elements layer just like HTML elements.
请注意，SVG元素就像HTML元素一样分层 。
另类盾牌 (An Alternative Shield)
We can be cleverer than this: as a general rule, the fewer elements in an SVG document, the better, so we can fake sections of the shield by using stroke and just two circles:
我们可以比这更聪明：通常，SVG文档中的元素越少越好，因此我们可以使用stroke和两个圆圈来伪造盾牌的各个部分：
<svg viewBox="0 0 500 500">
<title>Captain America's Shield</title>
<circle cx="250" cy="250" r="220" fill="white" />
<circle cx="250" cy="250" r="125" fill="blue" />
<polygon fill="white" points="250,150 280,209 346,219 298,265 309,330 250,300 192,330 203,265 155,219 221,209" />
</svg>Combined with this CSS:
与此CSS结合：
circle {
stroke-width: 50;
stroke: red;
}The result is the same as the original; the full version also uses an interesting variation of flexbox and box-shadow to position and shadow the shield.
结果与原始结果相同； 完整版还使用了一个有趣的flexbox和box-shadow变体来放置和遮蔽屏蔽。
椭圆形 (Ellipses)
The syntax for ellipses is very similar to circles:
椭圆的语法与圆非常相似：
<svg viewPort="0 0 120 120">
<ellipse cx="60" cy="60" rx="60" ry="30" />
</svg>In this case, there are two radius measurements, representing the semi-major and semi-minor axes of the ellipse.
在这种情况下，有两个半径测量值，分别代表椭圆的半长轴和半短轴。
One useful feature of circles and ellipses (and SVG shapes in general) written inline on a page is that, unlike HTML elements, their “hit area” exactly matches their actual shape. So if we link an ellipse:
以内联方式写在页面上的圆形和椭圆形(通常是SVG形状)的一个有用功能是，与HTML元素不同，它们的“命中区域”与实际形状完全匹配。 因此，如果我们链接一个椭圆：
<svg viewPort="0 0 120 120">
<a xlink:href="http://www.cnn.com">
<ellipse cx="60" cy="60" rx="50" ry="25" />
</a>
</svg>And combine it with this CSS:
并将其与此CSS结合：
ellipse:hover { fill: red; }The result is what you see below: note the very precise response to mouse position, especially coming in from the “corners”.
结果如下所示：请注意对鼠标位置的非常精确的响应，尤其是来自“角”的响应。
It’s possible to replicate this in HTML with border-radius on a elements, but the challenge becomes insurmountable the moment button shapes become more complicated, one reason why SVG makes a great format for UI elements.
这是可能的复制本在HTML border-radius的a元素，但面临的挑战变得难以逾越的那一刻按键的形状变得更加复杂，原因之一SVG使得对UI元素一个伟大的格式。
翻译自: https://thenewcode.com/1031/SVG-Shape-Elements-Circles-and-Ellipses
svg椭圆旋转
1117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
