Question

我试图在SVG中添加椭圆

（原始片段）

＆＃13;

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

＆＃13;

但添加一些属性有效：

（工作代码段）

＆＃13;

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

＆＃13;

问题：

xmlns和version的属性是什么？
为什么椭圆不显示在原始片段中（但是矩形和圆圈正确显示）？

请参阅here了解jsfiddle。

Answer 1

如果您没有提供画布尺寸，<svg>元素（与所有替换元素相同）默认为300px x 150px。你的椭圆在rx =＆＃34; 400＆＃34;画布外面也是如此。设置更大的画布大小可以修复东西，以便您可以看到椭圆。

version is pointless, xmlns is only required for standalone SVG files，如果您在html页面中嵌入内容，因为我们在这里使用代码段，您可以省略这两者。

＆＃13;

svg {
  width: 100%;
  height: 100%;
}

＆＃13;

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

＆＃13;

Answer 2

缺少width属性阻止椭圆显示的内容正如此代码段所示：

<svg width="350">
  <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>

视口大小默认为300x150，因此其他所有内容都会被裁剪。

如何在svg中创建一个椭圆

2 个答案: