jQuery change the SVG attribute issue?

Question

I have SVG code in a HTML page, I want to use the jQuery change the SVG dom background-color,but I can't change it, how can I do it?

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

score 0 · Answer 1 · answered Sep 03 '16 at 14:14

0

You could Use Snap.svg lib ! It's as easy as jQuery makes working with the DOM.

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

answered Sep 03 '16 at 14:14

smalinux

1,132
2
13
28

Thanks ,I will learn how to use it,I have use the jquey solve this problem , use follow up code: $("g:contains('3004') > rect").attr('style','fill:red;'); – scott Sep 03 '16 at 14:21
You are welcome!, Snap.svg is a Jquery for SVG ! see this [demo](http://codepen.io/anon/pen/ambAxm/left/) may be helpful! – smalinux Sep 03 '16 at 14:50

score 0 · Answer 2 · answered Sep 03 '16 at 14:42

try this :

$(document).ready(function(){

    $("text:contains(3014)").attr("fill","red");

})

Example :

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

score 0 · Answer 3 · edited May 23 '17 at 12:24

The fill attribute changes font color but not background. With the method provided in the answer here and the function here I created a snippet that may work for you using only jQuery/Javascript.

If you don't need to add the <defs> element and its children to the SVG using jQuery/Javascript but only need jQuery to activate the highlighting then see this example: 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>

jQuery change the SVG attribute issue?

3 Answers3