jQuery改变SVG属性的问题

jQuery change the SVG attribute issue?

本文关键字：问题 属性 SVG 改变 jQuery      更新时间：2023-09-26

我在一个HTML页面中有SVG代码，我想使用jQuery改变SVG dom的背景颜色，但是我不能改变它，我该怎么做呢?

<desc>3014</desc>
<rect x="0" width="63" height="36.15" y="976.138" class="position-bounds st7"></rect>
<text x="7.17" y="1001.41" v:langid="1033" class="position-text st8">3014</text>
$(document).ready(function(){
    $('text[text=3014]').attr('fill','red');
})

您可以使用Snap.svg库!这就像使用jQuery处理DOM一样简单。

<script src="http://snapsvg.io/assets/js/snap.svg-min.js"><script>
<script>
var s = Snap("css_selector");
s.attr({ fill,'red' });
<script>

try this:

$(document).ready(function(){
    $("text:contains(3014)").attr("fill","red");
})

的例子:

<html>
    <title>This is test</title>
    <head>
    </head>
    <body>
        
        <svg height="30" width="63">
           <text x="0" y="15" fill="blue">3014</text>
        </svg>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
            $("text:contains(3014)").attr("fill","red");
        })
        </script>
    </body>
</html>

填充属性改变字体颜色，但不改变背景。使用这里的答案中提供的方法和这里的函数，我创建了一个片段，可能只使用jQuery/Javascript就可以为您工作。

如果你不需要使用jQuery/Javascript将<defs>元素及其子元素添加到SVG中，但只需要jQuery来激活高亮显示，那么请参见以下示例:https://jsfiddle.net/t0eL0bre/7/

    $(document).ready(function() {
      $('#clicker').on('click', function() {
        var defs = makeSVG('defs', {
          id: 'd'
        });
        
        var filter = makeSVG('filter', {
          id: 'solid',
          'x': '0',
          'y': '0',
          width: '1',
          height: '1'
        });
        
        var flood = makeSVG('feFlood', {
          'flood-color': 'red'
        });
        
        var composite = makeSVG('feComposite', {
          'in': "SourceGraphic"
        });
        // this only gets the first SVG element on the page
        // you can also add it to all svg elements if you have more than one
        // by using a loop
        $svg = $('svg')[0];
        // used javascript's appendChild() function
        // instead of jQuery.append()
        // since jQuery inserts the elements into the innerHTML
        // of the element and not as dom child elements
        // so it would not work
        $svg.appendChild(defs);
        $svg.appendChild(filter);
        $solid = $('#solid')[0];
        $solid.appendChild(flood);
        $solid.appendChild(composite);
        // target text element by it's content
        $('text:contains(3014)').attr('filter', 'url(#solid)');
      });
    });
     // function written by @bobince in the answer of this post: https://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element
    function makeSVG(tag, attrs) {
      var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
      for (var k in attrs)
        el.setAttribute(k, attrs[k]);
      return el;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="25%" height="25%">
  <!-- <defs> <filter x="0" y="0" width="1" height="1" id="solid"><feFlood flood-color="red"/><feComposite in="SourceGraphic"/></filter></defs> -->
  <desc>3014</desc>
  <rect x="0" width="63" height="36.15" y="976.138" class="position-bounds st7"></rect>
  <text x="7.17" y="15" v:langid="1033" class="position-text st8 ">3014</text>
</svg>
<button id="clicker">Change Background</button>

相关文章：