3

我正在使用此代码来更改 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/

为了展示我想要达到的效果，我还使颜色更加鲜明。

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

4

4 回答 4

2

你的括号放错地方了

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

并且 jsfiddle 似乎很奇怪，因为在第一个循环案例中您使用的是 val 而不是 attr ie

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

应该

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

不应该吗？

最后，如果你只希望它在一个矩形上工作，那么你应该给那个矩形一个 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');
          }
      });
  });
于 2013-09-03T11:25:19.713 回答
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>
于 2013-09-03T15:59:59.320 回答
1

也许不是您要找的东西，但为了它的乐趣：使用 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>
于 2013-09-03T12:37:45.933 回答
1

由于 SVG 处理fill并stroke同时作为“样式”属性和通过“SVGPaint”api（已弃用），检索表示属性值的最安全方法是getComputedStyle，它针对 运行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');
于 2013-09-03T16:07:32.223 回答