CODEWITHSUNDEEP
javascriptjquerycssd3.jssvg
Rakesh
Rakesh

Reputation: 57

Add CSS styling to SVG

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

Upvotes: 0

Views: 1535

Answers (6)

daveyfaherty
daveyfaherty

Reputation: 4613

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.

Upvotes: 0

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

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>

Upvotes: 1

Vladimir M
Vladimir M

Reputation: 4489

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.

Upvotes: 1

Aravind Cheekkallur
Aravind Cheekkallur

Reputation: 3195

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>

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41832

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 */
}

Upvotes: 3

vijayP
vijayP

Reputation: 11502

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>

Upvotes: 2

Related Questions