SVG Element.outerHTML 属性

SVG Element.outerHTML 属性是一个只读的属性，它返回 SVG 元素及其所有子元素的 HTML 标记串。与 HTML 元素的 outerHTML 属性类似，SVG Element.outerHTML 也能够方便地获取或修改 SVG 元素的标记串。

语法

SVG Element.outerHTML 属性的语法如下：

var htmlString = element.outerHTML;

其中，element 是 SVG 元素对象。

示例

假设我们有如下 SVG 标记串，表示一个简单的 SVG 图片：

<svg id="my-svg" viewBox="0 0 100 100">
  <rect x="20" y="30" width="60" height="40" fill="blue" />
</svg>

要获取该 SVG 元素的标记串，我们可以使用以下 JavaScript 代码：

var svg = document.getElementById('my-svg');
var svgHtml = svg.outerHTML;

console.log(svgHtml);
// 输出：<svg id="my-svg" viewBox="0 0 100 100"><rect x="20" y="30" width="60" height="40" fill="blue"></rect></svg>

我们可以看到，SVG Element.outerHTML 属性返回了包含 SVG 元素及其子元素的标记串。

注意事项

• 与 HTML 版本不同，SVG Element.outerHTML 属性返回的标记串中不会包含结束标记（如 ""）。
• 与 HTML 元素不同，SVG 元素的 outerHTML 属性是只读属性，不能通过修改属性值来修改 SVG 元素的标记串。如果需要修改 SVG 元素的标记串，需要使用 SVG DOM 的 API。