Question

我正在使用此代码更改SVG对象的填充颜色并且它可以正常工作：

  $(function() {
      $('g').mouseenter(function () {
              $('path, rect, circle', this).attr('fill', '#00C8C8');
      })
  });

但是，如果现有填充颜色具有特定值，我只想更改填充颜色。所以，我想到这样的事情：

  $(function() {
      $('g').mouseenter(function () {
          if($('circle', this).attr('fill') == '#DCDCFF'){
              $('circle', this).attr('fill', '#00C8C8');
          }
      })
  });

编辑：...再次，jsfiddle中的轻微错误（感谢罗伯特）

我在jsfiddle上创建了一个页面：http://jsfiddle.net/Wc9ZE/4/

为了展示我想要的东西，我也让颜色更加鲜明。

问题是，所有的矩形变成黄色然后变成红色，我只希望原来是黄色的大矩形变红然后变成黄色。小白色矩形应保持白色。

Answer 1

您的括号位于错误的位置

if($('path, rect, circle', this).attr('fill') == '#DCDCFF') {

并且jsfiddle似乎很奇怪，因为在第一个圆圈情况下你使用的是val而不是attr，即

if ($('circle', this).val('fill')

应该是

if ($('circle', this).attr('fill')

不应该吗？

最后如果你只想让它在一个矩形上工作那么你应该给那个rect一个id属性（下面我假设id =“r”）然后改变这样的代码......

  $(function () {
      $('g').mouseenter(function () {
          if ($('circle', this).attr('fill') == 'yellow') {
              $('circle', this).attr('fill', 'pink');
          }
          if ($('#r', this).attr('fill') == 'red') {
              $('#r', this).attr('fill', 'yellow');
          }
      }).mouseleave(function () {
          if ($('#r', this).attr('fill') == 'yellow') {
              $('#r', this).attr('fill', 'red');
          }
          if ($('circle', this).attr('fill') == 'pink') {
              $('circle', this).attr('fill', 'yellow');
          }
      });
  });

Answer 2

抱歉，如果我听起来很愚蠢......我想我错了，我很抱歉，如果是这样的话

但我从你的问题中了解到，只有大矩形颜色应该改变而不是更小。这可以通过给两个矩形提供不同的id来非常容易地完成。

请参阅我的jsfiddle

示例代码如下

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
        <script>
              $(function () {
                  $('g').mouseenter(function () {
                      if ($('circle', this).attr('fill') == 'yellow') {
                          $('circle', this).attr('fill', 'pink');
                      }
                      if ($('rect', this).attr('fill') == 'red') {
                          $('#ttt33', this).attr('fill', 'yellow');
                      }
                  }).mouseleave(function () {
                      if ($('rect', this).attr('fill') == 'yellow') {
                          $('#ttt33', this).attr('fill', 'red');
                      }
                      if ($('circle', this).attr('fill') == 'pink') {
                          $('circle', this).attr('fill', 'yellow');
                      }
                  });
              });
        </script>
    </head> 
    <body>
        <svg version="1.1" width="250px" height="200px" viewBox="0, 0, 350, 250" xmlns="http://www.w3.org/2000/svg">
            <g id="S1">
                <rect x="20" y="55" width="220" height="95" fill="red" stroke="black" stroke-width="1" id="ttt33" />
                <rect x="20" y="80" width="30" height="40" fill="#FFFFFF" stroke="black" stroke-width="1" id="ttt22" />
                <line x1="20" y1="100" x2="50" y2="100" stroke="black" stroke-width="2" />
                <line x1="50" y1="100" x2="70" y2="100" stroke="black" stroke-width="1" />
                <circle cx="105" cy="100" r="35" stroke="black" stroke-width="4" fill="yellow" />
            </g>
        </svg>  
    </body>
</html>

Answer 3

也许不是你想要的，但为了它的乐趣：使用CSS3，如果设置了特定的填充属性，你可以在悬停时改变颜色（试试JS Bin）：

<svg xmln="http://www.w3.org/2000/svg" width="40" height="90">
  <style type="text/css">
    rect:hover[fill="#DCDCFF"]{fill:#00C8C8}
  </style>
  <rect width="40" height="40" fill="#DCDCFF"/>
  <rect y="50" width="40" height="40"/>
</svg>

Answer 4

由于SVG将fill和stroke都作为“样式”属性并通过“SVGPaint”api（不推荐使用）处理，因此检索表示属性值的最安全方法是{{ 3}}，它针对window运行，元素传入：

document.defaultView.getComputedStyle(base_dom_element).fill

或者：

  $(function() {
      $('g').mouseenter(function () {
          var dom_elem = $('circle',this).get(0);
          if(document.defaultView.getComputedStyle(dom_elem).fill == '#dcdcff'){
              $('circle', this).css('fill', '#00C8C8');
          }
      })
  });

此外，至少在Chrome中，该值以小写的rgb十六进制值的形式返回，因此您可能需要在比较之前更改值的大小写，以使其与浏览器保持友好。

您最初是否尝试过：

$('circle', this).css('fill');

仅当现有填充颜色为特定值时才填充SVG

4 个答案: