Fatal编程技术网
  • javascript/
  • 如何使用JavaScript在SVG中创建属性？

如何使用JavaScript在SVG中创建属性？

javascript svg

如何使用JavaScript在SVG中创建属性？,javascript,svg,Javascript,Svg,我的应用程序中有一个脚本，它在SVG中隐藏具有特定ID值的g元素，但这仅在g元素具有可见性属性时才起作用。但是，我使用的SVG在g元素上没有可见性属性，并且我不控制源代码。因此，我需要找到一种方法，在加载父HTML页面时以双代号方式添加可见性属性 我想让脚本在属于的所有g元素上创建可见性属性。例如，最终代码如下所示： <g id="Callouts"> <g id="Callout1" visibility="visible">...</g> <

我的应用程序中有一个脚本，它在SVG中隐藏具有特定ID值的g元素，但这仅在g元素具有可见性属性时才起作用。但是，我使用的SVG在g元素上没有可见性属性，并且我不控制源代码。因此，我需要找到一种方法，在加载父HTML页面时以双代号方式添加可见性属性

我想让脚本在属于
的所有g元素上创建可见性属性。例如，最终代码如下所示：

<g id="Callouts">
  <g id="Callout1" visibility="visible">...</g>
  <g id="Callout2" visibility="visible">...</g>
</g>

element.setAttribute("visibility", "visible");


...
...
我已经到处寻找将属性添加到SVG结构中的示例，但还没有找到任何内容。对于JavaScript，我是一个完全的新手，这也没有帮助。有人知道怎么做吗

更新：我将Digital Plane的建议代码与我用于访问SVG文档的代码进行了耦合。结果函数如下所示。这应该显示
下的每个g元素。但是，我在for循环中不断遇到“objectnotsupported”错误

function displayOnload (svgName) {
    var svgEmbed = document.embeds[svgName];
    if (typeof svgEmbed.getSVGDocument != 'undefined') {
        var svgDocument = svgEmbed.getSVGDocument();
        var parentElement = svgDocument.getElementById('Callouts');
        if (parentElement != null) {
            var childElements = parentElement.getElementsByTagname('g');
            for (var i=0; i < childElements.length; i++) {
                childElements[i].setAttribute('visibility', 'visible');
            }
        }
    }
}

函数显示加载（svgName）{
var svgEmbed=document.embeddes[svgName]；
if（svgEmbed.getSVGDocument的类型！=“未定义”）{
var svgDocument=svgEmbed.getSVGDocument（）；
var parentElement=svgDocument.getElementById（'callout'）；
if（parentElement！=null）{
var childElements=parentElement.getElementsByTagname（'g'）；
对于（var i=0；i
请原谅我对JavaScript的无知，但我在这里做错了什么

更新：下面是我的HTML代码示例

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:svg="http://www.w3.org/2000/svg">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Drop Bar assembly (2328775)</title>
  <link rel="stylesheet" type="text/css" href="Content.css" />
  <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
  <script type="text/javascript">
    function displayOnload (svgName) {
      var svgEmbed = document.embeds[svgName];
      if (typeof svgEmbed.getSVGDocument != 'undefined') {
        var svgDocument = svgEmbed.getSVGDocument();
        var parentElement = svgDocument.getElementById('Callouts');
        var childElements = parentElement.getElementsByTagName('g');
        for (var i=0; i &lt; childElements.length; i++) {
          childElements[i].setAttribute('visibility', 'hidden');
        }
      }
     }
  </script>
  </head>
  <body onload="displayOnload('SVG')">
  ...
  </body>
</html>


吊杆总成（2328775）
函数displayOnload（svgName）{
var svgEmbed=document.embeddes[svgName]；
if（svgEmbed.getSVGDocument的类型！=“未定义”）{
var svgDocument=svgEmbed.getSVGDocument（）；
var parentElement=svgDocument.getElementById（'callout'）；
var childElements=parentElement.getElementsByTagName（'g'）；
对于（var i=0；i childElements.length；i++）{
childElements[i].setAttribute（'visibility'，'hidden'）；
}
}
}
...
您应该能够使用以下内容：

<g id="Callouts">
  <g id="Callout1" visibility="visible">...</g>
  <g id="Callout2" visibility="visible">...</g>
</g>

element.setAttribute("visibility", "visible");
如果希望所有
g
元素都是
的子元素，请在加载文档时执行以下操作：

var element = document.getElementById("Callouts");
var elements = element.getElementsByTagName("g");
for(var i = 0; i < elements.length; i++)
  elements[i].setAttribute("visibility", "visible");

var-element=document.getElementById（“callout”）；
var elements=element.getElementsByTagName（“g”）；
对于（var i=0；i
否，必须使用setAttributeNS（null，'visibility'，'visible'）

在某些浏览器上，setAttribute可能无法在svg上/中工作

或者更直截了当地说： setAttribute是 刚毛
Svg有名称空间，Svg是xml，所以SetAttributes是为您准备的。

谢谢您的代码。这似乎是可行的，但我遇到了一个小问题。我更新了原来的帖子来解释。你能试着用
getElementsByTagName
代替
getElementsByTagName
吗？还有，你在哪一行上看到了错误？谢谢你抓住了！但是，在更新脚本之后，我现在在for循环中得到了一个“Expected'）”错误，在
中得到了一个“objectexpected”错误。你能发布一些HTML代码吗？我发布了一个HTML代码示例。如果您需要查看其他内容，请告诉我。只要您不使用前缀属性，setAttribute本质上等于setAttributeNS（null，…），因此对于大多数属性，它与setAttribute一起工作很好。它应该是相等的，但不是！这只是浏览器实现。[连结]