So erstellen Sie ein Attribut in SVG mit JavaScript?

Ich habe ein Skript, in meiner Anwendung, blendet g-Elemente in SVG, die bestimmte ID-Werte, aber das funktioniert nur, wenn das g-element muss eine Sichtbarkeit Attribut. Jedoch, die SVGs ich bin mit nicht Sichtbarkeits-Attribut auf die g-Elemente und ich bin nicht in der Steuerung der Quelle. Daher muss ich einen Weg finden, um dynymically fügen Sie die Sichtbarkeit Attribut, wenn das übergeordnete HTML-Seite geladen wird.

Ich würde gerne das Skript zum erstellen der Sichtbarkeit Attribut auf alle g Elemente, die Kinder von <g id="Callouts">. Zum Beispiel, der Letzte code würde wie folgt Aussehen:

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

Ich habe sah überall für Beispiele, in denen Attribute Hinzugefügt werden, ist die SVG-Struktur, aber nicht in der Lage zu finden, noch nichts. Es hilft auch nicht, dass ich bin ein völliger Neuling, wenn es um JavaScript. Weiß jemand, wie dies zu tun?

UPDATE: ich gepaart Digitale Ebene vorgeschlagenen code mit dem code, den ich verwende, um Zugriff auf das SVG-Dokument. Die resultierende Funktion ist unten. Dies soll zeigen, jeden g-element unter <g id="Callouts">. Jedoch bekomme ich immer wieder "Objekt nicht unterstützt" Fehler bei der for-Schleife.

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');
            }
        }
    }
}

Bitte verzeihen Sie meine Unwissenheit über JavaScript, aber was mache ich hier falsch?

UPDATE: Hier ein Beispiel von meinem HTML-code.

<?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>
  • Sie könnten versuchen mit getElementsByTagName statt getElementsByTagname? Auch, was das line sind Sie immer der Fehler auf?
  • Danke für den Fang, die! Allerdings, nach dem Update das script, ich bin jetzt immer ein "Erwartet ')'" Fehler bei der for-Schleife, und ein "Objekt erwartet" Fehler bei <body onload="displayOnload('SVG')">.
  • Können Sie nach ein paar der HTML-code?
  • Ich stellte ein Beispiel von meinem HTML-code. Lassen Sie mich wissen, wenn Sie brauchen, um zu sehen, nichts anderes.
InformationsquelleAutor Morgan | 2011-09-01
  1. 6

    Sollten Sie in der Lage sein zu verwenden setAttribute, mit so etwas wie dies:

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

    Wenn Sie möchten, dass alle g Elemente, die Kinder von <g id="Callouts">, tun Sie dies auf dem Dokument laden:

    var element = document.getElementById("Callouts");
var elements = element.getElementsByTagName("g");
for(var i = 0; i < elements.length; i++)
  elements[i].setAttribute("visibility", "visible");
    • Vielen Dank für den code. Es scheint, wie es funktionieren würde, aber ich in ein kleines problem. Ich habe aktualisiert die original-Beitrag zu erklären.
    InformationsquelleAutor Digital Plane
  2. 2

    Nein, müssen Sie setAttributeNS(null, "visibility', 'visible);

    setAttribute funktioniert möglicherweise nicht auf/in svg auf einigen Browsern.

    Oder unverblümter:
    setAttribute ist DOM1
    setAttributeNS ist DOM2
    Svg hat die Namen Räume, svg ist xml, so setAttributeNS ist für Sie.

    • setAttribute ist im wesentlichen gleich setAttributeNS(null, ...), solange Sie nicht Attribute mit dem Präfix, also bei den meisten Parametern funktioniert es Prima mit setAttribute.
    • Es sollte gleich sein, aber es ist nicht! Es ist nur browser-Implementierung. [link]stackoverflow.com/questions/2156278/...
    InformationsquelleAutor CoR
Schreibe einen Kommentar