Question

我有这个SVG代码，我试图在html 5中使用，但我没有运行，如何在html 5中使用这个SVG代码？当文件以SVG格式保存时，代码完全运行。但是这个代码如何以html 5形式保存？

<svg    xmlns="http://www.w3.org/2000/svg" width="100%"
     xmlns:xlink="http://www.w3.org/1999/xlink" >
    <script><![CDATA[
        var xmlns="http://www.w3.org/2000/svg"
        xlink="http://www.w3.org/1999/xlink" 
        Root=document.documentElement
        standardize(Root)

        function standardize(R){
            var Attr={
                "onmouseup":"add(evt)",
                "onmousedown":"grab(evt)",
                "onmousemove":null,
                "onmouseover":"hilight(evt)",
                "onmouseout":"hilight(evt)"
            }
            assignAttr(R,Attr)
        }
        function hilight(evt){
            var T=evt.target
            if (T.nodeName=="rect") return
            if (evt.type=="mouseover") T.setAttributeNS(null,"stroke-opacity",1)
            else T.setAttributeNS(null,"stroke-opacity",.5)
        }
        function add(evt){
            if (evt.target.nodeName!="rect") return
            var C=document.createElementNS(xmlns,"circle") 
            var stroke=Color()
            var rad=10+Math.random()*50
            var Attr={
                r:rad,
                cx:evt.clientX,
                cy:evt.clientY,
                "fill": Color(),
                "fill-opacity":.75,
                "stroke": stroke,
                "stroke-opacity":.5,
                "id":stroke,
                "stroke-width":10+Math.random()*(55-rad)
            }
            assignAttr(C,Attr)
            Root.appendChild(C)
        }
        function grab(evt){
            var O=evt.target
            if (evt.target.nodeName=="rect") return
            var Attr={
                "onmousemove":"slide(evt,'"+O.id+"')",
                "onmouseup":"standardize(Root)"
            }
            assignAttr(Root,Attr)
        }
        function slide(evt,id){
            var o=document.getElementById(id)
            var c=""; if (o.nodeName=="circle") c="c"
            o.setAttributeNS(null, c+"x", evt.clientX)
            o.setAttributeNS(null, c+"y", evt.clientY)
        }
        function assignAttr(O,A){
            for (i in A) O.setAttributeNS(null,i, A[i])
        }
        function Color(){
            return "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")"
        }
    ]]>
    </script>
    <rect width="100%" height="100%" fill="white"/>
    <text font-size="12pt" x="50" y="20" id="t1">Click something to move it</text>
    <text font-size="12pt" x="80" y="40" id="t2">Click nothing to add something</text>
</svg>

Answer 1

您无需编辑SVG格式的文件。大多数现代浏览器都可以渲染SVG，并像任何其他HTML标记一样处理SVG。

然而，要使这项工作正常，您需要将代码放在有效的html中，如下所示：

<!DOCTYPE html>
<html>
  <body>
    <!-- code goes here !-->
  </body>
</html>

另存为HTML并查看您的文件。

此外，如果您要验证，请从以下位置更改此行：

<rect width="100%" height="100%" fill="white"/>

为：

<rect width="100%" height="100%" fill="red"/>

你会看到红色，所以SVG正在渲染。

请参阅此JSFiddle（请注意，JSFiddle会使用正确的HTML自动包围您的HTML代码）。

作为一方，javascript在鼠标事件中包含错误（onmousemove，onmouseclick等）。

Answer 2

那是因为在你的javascript中，如果保存在html文件中，则根元素会被更改。

只是为了测试它，您可以在浏览器控制台上键入document.documentElement，然后如果将文件保存为SVG，则根元素引用SVG元素，而如果将其保存为html，则它引用HTML元素。

因此解决方案是向SVG元素添加 id 并通过id访问SVG元素。这是更新的工作代码。

<html>
<body>

<svg    xmlns="http://www.w3.org/2000/svg" width="100%"
     xmlns:xlink="http://www.w3.org/1999/xlink" id="svgbeast" >

    <script><![CDATA[
        var xmlns="http://www.w3.org/2000/svg"
        xlink="http://www.w3.org/1999/xlink" 
        Root=document.getElementById("svgbeast")
        standardize(Root)

        function standardize(R){
            var Attr={
                "onmouseup":"add(evt)",
                "onmousedown":"grab(evt)",
                "onmousemove":null,
                "onmouseover":"hilight(evt)",
                "onmouseout":"hilight(evt)"
            }
            assignAttr(R,Attr)
        }
        function hilight(evt){
            var T=evt.target
            if (T.nodeName=="rect") return
            if (evt.type=="mouseover") T.setAttributeNS(null,"stroke-opacity",1)
            else T.setAttributeNS(null,"stroke-opacity",.5)
        }
        function add(evt){
            if (evt.target.nodeName!="rect") return
            var C=document.createElementNS(xmlns,"circle") 
            var stroke=Color()
            var rad=10+Math.random()*50
            var Attr={
                r:rad,
                cx:evt.clientX,
                cy:evt.clientY,
                "fill": Color(),
                "fill-opacity":.75,
                "stroke": stroke,
                "stroke-opacity":.5,
                "id":stroke,
                "stroke-width":10+Math.random()*(55-rad)
            }
            assignAttr(C,Attr)
            Root.appendChild(C)
        }
        function grab(evt){
            var O=evt.target
            if (evt.target.nodeName=="rect") return
            var Attr={
                "onmousemove":"slide(evt,'"+O.id+"')",
                "onmouseup":"standardize(Root)"
            }
            assignAttr(Root,Attr)
        }
        function slide(evt,id){
            var o=document.getElementById(id)
            var c=""; if (o.nodeName=="circle") c="c"
            o.setAttributeNS(null, c+"x", evt.clientX)
            o.setAttributeNS(null, c+"y", evt.clientY)
        }
        function assignAttr(O,A){
            for (i in A) O.setAttributeNS(null,i, A[i])
        }
        function Color(){
            return "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")"
        }
    ]]>
    </script>

    <rect width="100%" height="100%" fill="white"/>
    <text font-size="12pt" x="50" y="20" id="t1">Click something to move it</text>
    <text font-size="12pt" x="80" y="40" id="t2">Click nothing to add something</text>
</svg>
</body>
</html>

祝你好运!!!

我们如何编辑SVG格式文件并另存为.html文件？

2 个答案: