时间戳

首页 > 解决方案 > 如何在svg中创建一个椭圆

html - 如何在svg中创建一个椭圆

问题描述

我正在尝试在 SVG 中添加一个椭圆

（原始片段）

    <svg>
      <rect x="0" y="0" width="100" height="100"></rect>
      <circle cx="200" cy="0" r="100"></circle>
      <ellipse cx="400" cy="0" rx="100" ry="50" fill="yellow"></ellipse>
    </svg>

但是添加一些属性是有效的：

（工作片段）

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
      <rect x="0" y="0" width="100" height="100"></rect>
      <circle cx="200" cy="0" r="100"></circle>
      <ellipse cx="400" cy="0" rx="100" ry="50" fill="yellow"></ellipse>
    </svg>

问题：

  1. 的属性xmlns和version用途是什么？
  2. 为什么椭圆没有出现在原始片段中（但矩形和圆圈正确显示）？

请参阅此处以获取 jsfiddle。

标签： htmlsvg

解决方案

如果您不提供画布大小，则<svg>元素（与所有替换元素相同）默认为300px x 150px。你的椭圆在 rx="400" 所以在画布外面。设置更大的画布尺寸可以修复问题，以便您可以看到椭圆。

版本是没有意义的，只有独立的 SVG 文件才需要 xmlns，如果您像我们在这里使用代码片段一样将内容嵌入到 html 页面中，您可以省略两者。

svg {
  width: 100%;
  height: 100%;
}
<svg>
    <rect x="0" y="0" width="100" height="100"></rect>
    <circle cx="200" cy="0" r="100"></circle>
    <ellipse cx="400" cy="0" rx="100" ry="50" fill="yellow"></ellipse>
</svg>

推荐阅读