显示 HTML 文档中的多个 SVG 图层

我有一个包含 3 个矢量形状的 SVG 文件：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="1500px" viewBox="0 0 1500 1500" enable-background="new 0 0 1500 1500" xml:space="preserve">
  <svg:style xmlns:svg="http://www.w3.org/2000/svg" type="text/css">
    g { display: none; }
    g:target { display: block; }
  </svg:style>
  <g id="svgRed">
    <rect x="301" y="344" fill="#DB1919" stroke="#000000" stroke-width="10" stroke-miterlimit="10" width="286" height="314"/>
  </g>
  <g id="svgGreen">
    <circle fill="#1AD84B" cx="692.143" cy="1007.381" r="180.953"/>
  </g>
  <g id="svgBlue">
    <path fill="#1A7ED8" d="M1271,1052c0,1.657-1.343,3-3,3h-251c-1.657,0-3-1.343-3-3V347c0-1.657,1.343-3,3-3h251 c1.657,0,3,1.343,3,3V1052z"/>
  </g>
</svg>

如您所见，我将每个形状放在一个单独的组中。我已将所有组设置为display:none，除非它们是目标。现在我可以在 HTML 文档中显示蓝色形状，如下所示：

<object data="test.svg#svgBlue" type="image/svg+xml" width="600" height="860">

我的问题是，如果我想显示其中两个形状怎么办？我似乎无法在 HTML 中定位多个形状。

我将同时使用javascript，所以这也是可以接受的。

首先，您必须在HTML5文档中内联插入SVG。该对象无法通过本地 javascript 访问。然后可以通过DOM显示/隐藏和更改所有元素。您可以使用XMLHttpRequest将内联svg加载为xml。然后让响应填充 DIV 的内部 HTML。

请尝试以下文件。加载后，您可以使用按钮切换显示。

假设你有一个 svg 文件（我的.svg）

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 1500 1500">
  <g id="svgRed" display="inline">
    <rect x="301" y="344" fill="#DB1919" stroke="#000000" stroke-width="10" stroke-miterlimit="10" width="286" height="314"/>
  </g>
  <g id="svgGreen" display="inline">
    <circle fill="#1AD84B" cx="692.143" cy="1007.381" r="180.953"/>
  </g>
  <g id="svgBlue" display="inline">
    <path fill="#1A7ED8" d="M1271,1052c0,1.657-1.343,3-3,3h-251c-1.657,0-3-1.343-3-3V347c0-1.657,1.343-3,3-3h251 c1.657,0,3,1.343,3,3V1052z"/>
  </g>
</svg>

您的HTML5文档如下所示：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<center>
<div id="svgInlineDiv" style='background-color:lightgreen;width:300px;height:300px;'></div>
<button onClick=toggleDisplay(svgRed)>toggle red</button>
<button onClick=toggleDisplay(svgBlue)>toggle blue</button>
<button onClick=toggleDisplay(svgGreen)>toggle green</button>
</center>
<script id=myScript>
function toggleDisplay(me)
{
  if(me.getAttribute("display")=="inline")
    me.setAttribute("display","none")
   else
    me.setAttribute("display","inline")
}
</script>
<script>
document.addEventListener("onload",inlineSVG(),false)
function inlineSVG()
{
    var SVGFile="my.svg"
    var loadXML = new XMLHttpRequest;
    function handler(){
    if(loadXML.readyState == 4 && loadXML.status == 200)
        svgInlineDiv.innerHTML=loadXML.responseText
    }
    if (loadXML != null){
        loadXML.open("GET", SVGFile, true);
        loadXML.onreadystatechange = handler;
        loadXML.send();
    }
}
</script>
</body>
</html>

相关内容

最新更新

热门标签：