Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to get svg element type

i have a question, how can i get the type of svg element, btw i use d3.js

i have sth like this

var selectedElement = svg.select("." + STYLE.selected);

         if (selectedElement instanceof SVGCircleElement){
            alert("here circle");
            selectedElement.style("fill", function(){return d3.rgb(d3.select(this).attr("fill"));});
         }
           if (selectedElement instanceof SVGPathElement){
             alert("here path");
                appendMarkerm(selectedElement,false);

         }

but it seems didnt work , can someone help out here ,thanks !!


***finally, i made it work like this*** 

var selectedElement = svg.select("." + STYLE.selected);
           if (selectedElement.node() instanceof SVGCircleElement){
            selectedElement.style("fill", function(){return d3.rgb(d3.select(this).attr("fill"));});
         }
           if (selectedElement.node() instanceof SVGPathElement){
            changeMarkerStyle(selectedElement,false); 
         }

cauz selection.node() will return the first element of the selection

like image 616
user2717621 Avatar asked Aug 30 '13 09:08

user2717621


People also ask

What type of element is SVG?

The svg element is a container that defines a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document. Note: The xmlns attribute is only required on the outermost svg element of SVG documents.

What is SVG type in TypeScript?

What is the type of the <svg> element in TypeScript? The interface type of <svg> elements in an *. svg document (i.e. the SVG DOM) is SVGElement . The type of an <svg> element within a HTML document (i.e. the HTML DOM) is actually a prototype-less object that implements both HTMLElement and SVGElement !

Is SVG a HTML element?

The <svg> element in HTML is used to support SVG graphics. SVG graphics include a container that we can use to draw multiple shapes like boxes, paths, text, graphic images, and circles. Almost every latest browser supports this HTML tag.


1 Answers

Just use the tagName property:

svg.select("." + STYLE.selected)
   .call( function(){

      switch( selectedElement.tagName.toLowerCase() ) {
        case 'circle': 
          alert("here circle");
          this.style("fill", function(){return d3.rgb(d3.select(this).attr("fill"));});
          break;

        case 'path':
          alert("here path");
          appendMarkerm( this, false );
          break;
      }

    });

EDIT

d3js' select() does not return the element itself, but a d3js wrapper for it (very much like in jQuery, e.g.). So the easiest way, would be to use the call() method to apply a function to all matches (in the case of just select() this is just one).

like image 149
Sirko Avatar answered Sep 27 '22 20:09

Sirko