第 1 天：如何使用 SVG 绘制基本形状
调整 SVG 的大小
在开始绘制之前，我们必须谈谈 svg 标签本身。SVG 元素包含图像元素并定义图像的框架。它设置图像的内部大小和外部大小。
width和 height 属性定义图像在浏览器中占用的空间大小。还有一个viewBox属性用于定义要绘制的SVG画布在坐标系上的相对位置，这个属性是SVG画布和其内的各种图形元素在绘制时自己需要的坐标参数。viewBox 中的前两个值定义画布左上角坐标，后两个值定义画布右下角坐标。
width和height定义的大小是 HTML 页面上的体现大小以及它在浏览器中显示的大小。- 定义
viewBox的大小是给要绘制的SVG画布绘制时在坐标系上设定的参照位置。
在接下来的三个示例中，我们有三个具有完全相同内容的 SVG。 circle 具有相同中心坐标和相同半径的元素。不过，它们看起来完全不同。如果 viewBox 定义的大小与 width 和 height 属性不匹配，则图像将放大或缩小。
<svg
width="100"
height="100"
viewBox="0 0 200 200"
>
<circle cx="100" cy="100" r="50" />
</svg><svg
width="200"
height="200"
viewBox="0 0 200 200"
>
<circle cx="100" cy="100" r="50" />
</svg><svg
width="200"
height="200"
viewBox="0 0 100 100"
>
<circle cx="100" cy="100" r="50" />
</svg>我们还可以在图像的左上角设置坐标。在以下示例中，我们将坐标系的原点移动到图像的中心。我们将左上角 -100,-100 设置为负数图像大小的一半。
请注意，现在圆的中心位置是 0,0。
<svg
width="200"
height="200"
viewBox="-100 -100 200 200"
>
<circle cx="0" cy="0" r="50" />
</svg>SVG 通常也有一个 xmlns 属性。但是，如果图像嵌入在 HTML 中，则可以省略这一点。
如何绘制圣诞装饰品
让我们从一个简单的圣诞装饰品开始。在这里，我们只使用简单的形状、一个矩形和两个圆形。请注意，坐标系的原点位于图像的中心。
首先，我们通过绘制 circle.为了画一个圆，我们用r属性设置它们的半径，和中心位置（cx和cy）。
我们也有表现属性来塑造我们的形状。与 background-color CSS 中的属性类似，我们使用属性 fill 设置形状的颜色。
<svg
width="200"
height="200"
viewBox="-100 -100 200 200"
>
<circle
cx="0"
cy="20"
r="70"
fill="#D1495B"
/>
</svg>然后我们用这个 rect 元素在圣诞装饰品的顶部画一个矩形作为小帽子。在这种情况下，我们必须设置矩形的左上角位置及其大小。我们使用该 fill 属性的方式与使用圆的方式相同。
<svg
width="200"
height="200"
viewBox="-100 -100 200 200"
>
<circle
cx="0"
cy="20"
r="70"
fill="#D1495B"
/>
<rect
x="-17.5"
y="-65"
width="35"
height="20"
fill="#F79257"
/>
</svg>最后，我们在这些上面添加另一个圆圈作为挂环。请注意，我们使用相同的circle元素，但具有不同的属性。我们将 fill 属性设置为“none”，并使用 和 stroke-width 属性为形状stroke设置边框。
左图的最终代码如下：
<svg width="200" height="200" viewBox="-100 -100 200 200">
<circle cx="0" cy="20" r="70" fill="#D1495B" />
<rect x="-17.5" y="-65" width="35" height="20" fill="#F79257" />
<circle
cx="0"
cy="-75"
r="12"
fill="none"
stroke="#F79257"
stroke-width="2"
/>
</svg>太棒了！我们绘制了第一张 SVG 图像。现在让我们进入更复杂的事情！
| 分享： |  |