使用javascript修改svg属性无效

Question

I'm trying to modify an svg tag with javascript to make it resizable, but my changes have no effect. 我正在尝试使用javascript修改svg标记以使其可调整大小，但我的更改没有任何效果。 The reason that I need to do this is that this tag is rendered by a library that I can't modify, and thus it seems like my only choice is to modify the svg with javascript. 我需要这样做的原因是这个标签由我无法修改的库呈现，因此我似乎唯一的选择是使用javascript修改svg。

I know that the tag that this script produces is correct since I am able to copy the tag to a new html document and it will work (I have included it in the sample code), so it seems like I need some way to force the svg to recognize that it has been changed (or another way to modify the svg). 我知道这个脚本生成的标签是正确的，因为我能够将标签复制到一个新的html文档，它可以工作（我已将它包含在示例代码中），所以我似乎需要一些方法来强制svg认识到它已被更改（或修改svg的其他方式）。

Here's a HTML page that shows my problem: 这是一个显示我的问题的HTML页面：

<html>
    <head>
        <script src="http://code.jquery.com/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function () {
            var svg = $('#testsvg').find('svg')[0];

            var w = svg.getAttribute('width').replace('px', '');
            var h = svg.getAttribute('height').replace('px', '');

            svg.removeAttribute('width');
            svg.removeAttribute('height');

            svg.setAttribute('viewbox', '0 0 ' + w + ' ' + h);
            svg.setAttribute('preserveaspectratio', 'xminymin meet')

            $(svg)
                .css('width', '100%')
                .css('height', '100%')
                .css('background-color', 'white');
        });
        </script>
    </head>
    <body style="background-color: #333;">
        <div style="width: 80%; height: 40%;">
            <svg id="resultsvg" xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 100%; height: 100%; background-color: white; " viewbox="0 0 100 100" preserveaspectratio="xminymin meet">
                <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red"></circle>
            </svg>
         </div>
        <div id="testsvg" style="width: 80%; height: 40%;">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
                <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
            </svg>
        </div>
     </body>
</html>

Answer 1

SVG is case sensitive so SVG区分大小写

svg.setAttribute('viewbox', '0 0 ' + w + ' ' + h);
svg.setAttribute('preserveaspectratio', 'xminymin meet')

should be written 应该写

svg.setAttribute('viewBox', '0 0 ' + w + ' ' + h);
svg.setAttribute('preserveAspectRatio', 'xMinYMin meet')

width and height on the <svg> element are attributes and not styles (unlike html) so you should use setAttribute('width', '100%') rather than .css('width', '100%') <svg>元素的宽度和高度是属性而不是样式（与html不同）所以你应该使用setAttribute('width', '100%')而不是.css('width', '100%')

Answer 2

jQuery convert attribute name to lower case; jQuery将属性名称转换为小写; eg, instead of setting a viewBox attribute, it will set viewbox . 例如，它将设置viewbox ，而不是设置viewBox属性。 Unfortunately, SVG (a XML dialect) element attribute names are case sensitive. 不幸的是，SVG（XML方言）元素属性名称区分大小写。

If you wanted to use jQuery consistently, you could use $.attrHooks to handle the case sensitive attributes: 如果你想要一致地使用jQuery，你可以使用$.attrHooks来处理区分大小写的属性：

['preserveAspectRatio', 'viewBox'].forEach(function(k) {
  // jQuery converts the attribute name to lowercase before
  // looking for the hook. 
  $.attrHooks[k.toLowerCase()] = {
    set: function(el, value) {
      if (value) {
        el.setAttribute(k, value);
      } else {
        el.removeAttribute(k, value);
      }
      return true;
    },
    get: function(el) {
      return el.getAttribute(k);
    },
  };
});

$(document).ready(function() {
  var svg = $('#testsvg');
  var w = svg.attr('width').replace('px', '');
  var h = svg.attr('height').replace('px', '');

  svg.attr({
    width: '100%',
    height: '100%',
    viewBox: [0, 0, w, h].join(' '),
    preserveAspectRatio: 'xMidYMid meet'
  })
});

Note that el.attr('viewBox', null) would failed; 请注意， el.attr('viewBox', null)将失败; your hook setter won't be called. 你的钩子设定器不会被调用。 Instead you should use el.removeAttr('viewBox') or el.attr('viewBox', false) . 相反，你应该使用el.removeAttr('viewBox')或el.attr('viewBox', false) 。

For other attribute like stroke, I would put them in a stylesheet. 对于像笔画这样的其他属性，我会将它们放在样式表中。

svg {
  background-color: white;
}
circle {
  fill: red;
  stroke: black;
  stroke-width: 1px;
}

If you need to add/toggle class to change the style of a specific elements, you need to use jQuery 1.12+ or jquery 2.2+. 如果需要添加/ toggle类来更改特定元素的样式，则需要使用jQuery 1.12+或jquery 2.2+。

使用javascript修改svg属性无效

问题描述

2 个解决方案

解决方案1
23 已采纳 2012-06-11 05:10:10

解决方案2
6 2015-03-06 00:40:51

使用javascript修改svg属性无效

问题描述

2 个解决方案

解决方案1 23 已采纳 2012-06-11 05:10:10

解决方案2 6 2015-03-06 00:40:51

解决方案1
23 已采纳 2012-06-11 05:10:10

解决方案2
6 2015-03-06 00:40:51