Question

我有一个SVG，我希望在所有圈子中添加一个特定的样式，其中r =＆＃34; 5＆＃34;

<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>

我试过这个但是没有用

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

任何人都可以帮助我，因为我是SVG的新手

Answer 1

尝试一次：

我使用querySelectorAll来获取带有提供的类名和属性的过滤元素。

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
}

并且addClass方法也不适用于JavaScript DOM对象。它可用于jQuery对象。如果要使用addClass方法，请将DOM对象转换为jquery对象，如下所示：

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

此外，您也可以使用CSS进行相同的选择：

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

Answer 2

实际上你的代码确实有效。什么是行不通的，是你的属性。

我认为你应该看看https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity

这适用于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>

您可以像按照属性过滤元素。但是，您需要等到内容加载完毕。

Answer 3

它的工作。看到这个。请改用element.classList.add()：

＆＃13;

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

＆＃13;

.test {
  opacity: 0.3 !important;
}

＆＃13;

<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>

＆＃13;

Answer 4

简短的D3解决方案（因为您的问题中包含d3js标记），使用selection和filter：

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

这就是您所需要的：circles是一个包含所有半径为5像素的圆的选择。

一旦我们有了正确的选择，我们就可以按照我们想要的方式操纵它。例如，让所有这些圈子向右移动：

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

这是一个演示片段：

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>

Answer 5

这可以使用d3.js来实现。请找到下面的答案

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>

Answer 6

CSS使这很容易。

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

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

请记住，这些是带有属性的html元素;它不必变得如此奇怪。

将CSS样式添加到SVG

6 个答案: