Add CSS styling to SVG

Question

I have an SVG in which i want to add a particular styling to all circle having r="5"

<div class="svgchart">
    <svg width="1190" height="390">
        <circle  class="bubble-plot-chart-circle" cx="400" cy="400" r="40" fill="blue"></circle>
        <circle  class="bubble-plot-chart-circle" cx="400" cy="400" r="5" fill="blue"></circle>
        <circle class="bubble-plot-chart-circle " cx="400" cy="400" r="5" fill="blue"></circle>
    </svg>  
</div>

I have tried this but does not work

var allElements = document.getElementsByClassName("bubble-plot-chart-circle");

for(var i = 0; i < allElements.length; i++) {
    var element = allElements[i];

    if(element.getAttribute("r") === "5") {
        // it takes the initial inline style which was applied at the time of crating the SVG
        element.setAttribute("opacity", "0 !important");// does not work for SVG  
        element.addClass("test"); // does not work for SVG 
    } 
}

can any one help me on this as i am new to SVG

Is `addClass` defined in your script? Do you get an error in the console? — Brett DeWoody, Sep 27 '16 at 06:41
http://stackoverflow.com/questions/8638621/jquery-svg-why-cant-i-addclass — Robert Longson, Sep 27 '16 at 06:47
!important is invalid within a presentation attribute it they won't override a CSS style rule that is applied to an element, it can override less specific CSS style rules though such as a rule that applies to a class or to all elements. — Robert Longson, Sep 27 '16 at 06:49
@Rakesh - you can access the native methods with: `elem.classList.add`, `elem.classList.remove`, `elem.classList.contains`, `elem.classList.toggle` — enhzflep, Sep 28 '16 at 14:56

Mr_Green · Answer 1 · 2016-09-27T06:50:46.837

2

Try this once:

I used querySelectorAll to get the filtered elements with provided class name and attribute.

var allElements = document.querySelectorAll(".bubble-plot-chart-circle[r='5']");   // filtering as required

for(var i = 0; i < allElements.length; i++) {
    var element = allElements[i];

    element.setAttribute("opacity", "0");  // !important is invalid in presentation attribute (check comment above)
    element.classList.add("test");         // JavaScript's method instead of jquery's addClass method
}

and also addClass method is not available for JavaScript DOM object. It is available for jQuery object. If you want to use addClass method, convert the DOM object to jquery object as shown below:

var jqueryElement = $(element);
jqueryElement.addClass('test');

And also, you can do the same selection using CSS as well:

.bubble-plot-chart-circle[r='5'] {
     /* SVG styles here */
}

edited Sep 27 '16 at 06:50

answered Sep 27 '16 at 06:39

Mr_Green

40,727
45
159
271

how can i pass a variable in .var count= 5; bubble-plot-chart-circle[r='count']?? – Rakesh Sep 27 '16 at 10:29
@Rakesh I didn't get you. – Mr_Green Sep 27 '16 at 10:36
var test =5 ; document.querySelectorAll(".bubble-plot-chart-circle[r= " + test + " ]"); how to pass the variable test to this syntax?? I tried this document.querySelectorAll(".bubble-plot-chart-circle[r="+test+"]"); but gettign error in console – Rakesh Sep 27 '16 at 10:44
@Rakesh try this `document.querySelectorAll(".bubble-plot-chart-circle[r='" + test + "']");` – Mr_Green Sep 27 '16 at 10:46
i tried this var element = document.querySelectorAll(".bubble-plot-chart-circle"); var jqueryElement = $(element); jqueryElement.addClass('test'); but does not work...is their any syntax mistake? – Rakesh Sep 27 '16 at 12:16
`document.querySelectorAll` returns list of elements. You can't convert list to jquery object. So use `$('.bubble-plot-chart-circle')`. Don't use `document.querySelectorAll`. – Mr_Green Sep 27 '16 at 12:19
1

@enhzflep OP wanted with jQuery. – Mr_Green Sep 28 '16 at 17:16
Note that you need jQuery 3.0 or later if you want to use `addClass` with SVG elements. https://jquery.com/upgrade-guide/3.0/#feature-svg-documents-support-class-operations – Paul LeBeau Oct 18 '16 at 05:25

Vladimir M · Answer 2 · 2016-09-27T06:57:51.553

Actually your code does work. What doesn't work, is your attribute.

I think you should look at https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity

This works in plunker:

<body>
    <div class="svgchart">
    <svg width="1190" height="390">
        <circle  class="bubble-plot-chart-circle" cx="400" cy="400" r="40" fill="blue"></circle>
        <circle  class="bubble-plot-chart-circle" cx="400" cy="400" r="5" fill="blue"></circle>
        <circle class="bubble-plot-chart-circle " cx="400" cy="400" r="5" fill="blue"></circle>
    </svg>  
    </div>
    <script>
    var allElements = document.getElementsByClassName("bubble-plot-chart-circle");

    for(var i = 0; i < allElements.length; i++) {
        var element = allElements[i];

        element.setAttribute("fill-opacity", "0");  
    }

    </script>
  </body>

You can filter elements by attribute as you do. However, you need to wait till content is loaded.

score 1 · Answer 3 · answered Sep 27 '16 at 06:47

Its working. See this. Use element.classList.add() instead:

window.onload = function(e) {
  var allElements = document.getElementsByClassName("bubble-plot-chart-circle");

  for (var i = 0; i < allElements.length; i++) {
    var element = allElements[i];

    if (element.getAttribute("r") === "5") {

         element.classList.add("test");
      
    }
  }
}

.test {
  opacity: 0.3 !important;
}

<div class="svgchart">
  <svg width="1190" height="390">
    <circle class="bubble-plot-chart-circle" cx="100" cy="100" r="40" fill="blue"></circle>
    <circle class="bubble-plot-chart-circle" cx="100" cy="200" r="5" fill="blue"></circle>
    <circle class="bubble-plot-chart-circle " cx="100" cy="300" r="5" fill="blue"></circle>
  </svg>
</div>

Gerardo Furtado · Answer 4 · 2016-09-27T15:56:00.810

A short D3 solution (since you have the d3js tag in your question), using selection and filter:

var circles = d3.selectAll("circle").filter(function(){
return d3.select(this).attr("r") == 5;});

And that's all you need: circles is a selection containing all the circles with a 5-pixel radius.

Once we have the proper selection, we can manipulate it the way we want. For instance, making all these circles moving to the right:

circles.transition().duration(1000).attr("transform", "translate(100,0)");

Here is a demo snippet:

var circles = d3.selectAll("circle").filter(function(){
return d3.select(this).attr("r") == 5;});
circles.transition().delay(500).duration(1000).attr("transform", "translate(100,0)");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
 <svg width="390" height="390">
        <circle  class="bubble-plot-chart-circle" cx="20" cy="40" r="40" fill="blue"></circle>
        <circle  class="bubble-plot-chart-circle" cx="100" cy="40" r="5" fill="blue"></circle>
        <circle class="bubble-plot-chart-circle " cx="140" cy="40" r="5" fill="blue"></circle>
    </svg>

score 0 · Answer 5 · answered Sep 27 '16 at 06:55

This can be achive using d3.js. please find the answer below

var circle = d3.selectAll('.bubble-plot-chart-circle');
circle._groups.forEach(function(t){
    t.forEach(function(e){
    if(d3.select(e).attr("r") == 5){
     d3.select(e).style('fill','red')
    }})
})

<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="svgchart">
    <svg width="500" height="310">
        <circle  class="bubble-plot-chart-circle" cx="400" cy="100" r="40" fill="blue"></circle>
        <circle  class="bubble-plot-chart-circle" cx="400" cy="200" r="5" fill="blue"></circle>
        <circle class="bubble-plot-chart-circle " cx="400" cy="250" r="5" fill="blue"></circle>
    </svg>  
</div>

score 0 · Answer 6 · answered Oct 18 '16 at 11:03

0

CSS makes this pretty easy.

circle[r="5"]{
  fill: #f12222;
}

Codepen: http://codepen.io/daveycakes/pen/RGZVPv

Remember, these are html elements with attributes; it doesn't have to get so weird.

answered Oct 18 '16 at 11:03

daveyfaherty

4,585
2
27
42

Add CSS styling to SVG

6 Answers6