xml怎么转为svg. js

XML转为SVG的核心步骤包括：解析XML、创建SVG元素、设置属性和样式、插入到文档中。

详细描述：首先，需要解析XML内容以提取其结构和数据。然后，根据这些数据创建相应的SVG元素，并设置它们的属性和样式。最后，将这些SVG元素插入到网页的DOM中以进行显示。

一、解析XML

1、使用DOMParser解析XML字符串

DOMParser是一种解析XML字符串并将其转换为DOM对象的方法。以下是一个简单的示例，展示如何使用DOMParser解析XML字符串：

const xmlString = `
<shapes>
    <circle cx="50" cy="50" r="40" />
    <rect x="100" y="20" width="50" height="50" />
</shapes>
`;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "text/xml");

2、提取XML数据

解析完XML后，我们需要提取其中的数据。可以使用标准的DOM方法，如getElementsByTagName、querySelectorAll等。

const circles = xmlDoc.getElementsByTagName('circle');
const rects = xmlDoc.getElementsByTagName('rect');

二、创建SVG元素

1、创建SVG容器

接下来，我们需要创建一个SVG容器元素，并设置其宽度和高度。

const svgNS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(svgNS, "svg");
svg.setAttribute("width", "200");
svg.setAttribute("height", "200");

2、创建SVG子元素

根据从XML中提取的数据，创建相应的SVG子元素，并设置其属性。

Array.from(circles).forEach(circle => {
    const svgCircle = document.createElementNS(svgNS, "circle");
    svgCircle.setAttribute("cx", circle.getAttribute("cx"));
    svgCircle.setAttribute("cy", circle.getAttribute("cy"));
    svgCircle.setAttribute("r", circle.getAttribute("r"));
    svg.appendChild(svgCircle);
});
Array.from(rects).forEach(rect => {
    const svgRect = document.createElementNS(svgNS, "rect");
    svgRect.setAttribute("x", rect.getAttribute("x"));
    svgRect.setAttribute("y", rect.getAttribute("y"));
    svgRect.setAttribute("width", rect.getAttribute("width"));
    svgRect.setAttribute("height", rect.getAttribute("height"));
    svg.appendChild(svgRect);
});

三、设置属性和样式

1、设置基础属性

在创建SVG元素时，可以同时设置其基础属性，例如颜色、边框等。

svgCircle.setAttribute("stroke", "black");
svgCircle.setAttribute("stroke-width", "2");
svgCircle.setAttribute("fill", "red");
svgRect.setAttribute("stroke", "black");
svgRect.setAttribute("stroke-width", "2");
svgRect.setAttribute("fill", "blue");

2、应用样式表

为了更好地管理样式，可以使用CSS样式表来定义SVG元素的样式。

<style>
    svg circle {
        fill: red;
        stroke: black;
        stroke-width: 2;
    }
    svg rect {
        fill: blue;
        stroke: black;
        stroke-width: 2;
    }
</style>

四、插入到文档中

1、将SVG插入到DOM中

最后一步是将创建好的SVG元素插入到网页的DOM中，以便在浏览器中显示。

document.body.appendChild(svg);

2、使用特定容器

有时，我们希望将SVG插入到特定的容器中，而不是直接插入到body中。

const container = document.getElementById('svgContainer');
container.appendChild(svg);

五、综合示例

下面是一个综合示例，展示了如何将XML转换为SVG，并插入到网页中显示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XML to SVG</title>
    <style>
        svg circle {
            fill: red;
            stroke: black;
            stroke-width: 2;
        }
        svg rect {
            fill: blue;
            stroke: black;
            stroke-width: 2;
        }
    </style>
</head>
<body>
    <div id="svgContainer"></div>
    <script>
        const xmlString = `
        <shapes>
            <circle cx="50" cy="50" r="40" />
            <rect x="100" y="20" width="50" height="50" />
        </shapes>
        `;
        const parser = new DOMParser();
        const xmlDoc = parser.parseFromString(xmlString, "text/xml");
        const svgNS = "http://www.w3.org/2000/svg";
        const svg = document.createElementNS(svgNS, "svg");
        svg.setAttribute("width", "200");
        svg.setAttribute("height", "200");
        const circles = xmlDoc.getElementsByTagName('circle');
        const rects = xmlDoc.getElementsByTagName('rect');
        Array.from(circles).forEach(circle => {
            const svgCircle = document.createElementNS(svgNS, "circle");
            svgCircle.setAttribute("cx", circle.getAttribute("cx"));
            svgCircle.setAttribute("cy", circle.getAttribute("cy"));
            svgCircle.setAttribute("r", circle.getAttribute("r"));
            svg.appendChild(svgCircle);
        });
        Array.from(rects).forEach(rect => {
            const svgRect = document.createElementNS(svgNS, "rect");
            svgRect.setAttribute("x", rect.getAttribute("x"));
            svgRect.setAttribute("y", rect.getAttribute("y"));
            svgRect.setAttribute("width", rect.getAttribute("width"));
            svgRect.setAttribute("height", rect.getAttribute("height"));
            svg.appendChild(svgRect);
        });
        const container = document.getElementById('svgContainer');
        container.appendChild(svg);
    </script>
</body>
</html>

通过以上步骤，我们成功地将XML内容转换为SVG，并在网页中显示。这个过程不仅可以用于简单的形状，还可以扩展到更复杂的SVG图形。