我正在使用javascript创建SVG元素,但是无法进行样式设置。
它创建了SVG,所有内容都显示在HTML中的浏览器检查器中。类名称显示在HTML的开始标记中。但是,它没有应用CSS样式。

在Chrome中,它们显示在HTML中,但CSS检查器无法识别它们;而在Firefox中,它们被CSS检查器识别,但仍未显示在浏览器中。它们在任一浏览器窗口中均不显示任何内容。

我尝试了4种应用类的方法:

my_SVG.className ='my-svg';

my_SVG.classList.add('my-svg');

my_SVG.setAttribute('class','my-svg');

my_SVG.setAttributeNS(null,'class','my-svg');

他们都没有改变。我也手动创建了此svg,它的效果很好,但是当我尝试使用javascript创建它时,它就不会样式。有没有解决的办法。我还注意到,大多数使用createElementNS();之类的命令使用javascript创建SVG元素的文档都位于MDN上,因此这与Firefox为什么至少将其放入CSS检查器有关吗?更重要的是,这是否意味着在Chrome中这是不可能的?

这是我的代码:



<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    .wrapper {
      width: 100%;
      height: auto;
      margin: auto;
      text-align: center;
    }
    .my-svg {
      display: block;
      margin: 0 auto;
    }
    svg path.checkMark {
      fill: none;
      stroke-width: 7;
      stroke: rgba(102, 204, 102, 1);
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <!-- <svg class="my-svg" width="80px" height="80px" viewBox="0 0 90 90">
      <path class="checkMark" d="M25 37 L35 47 L55 32"></path>
    </svg> -->
  </div>

  <script type="text/javascript">
    function createSVG() {
      var contianer = document.querySelector('.wrapper');
      var xlmns = "http://www.w3.org/2000/xhtml";
      var my_SVG = document.createElementNS('xlmns', 'svg');
      my_SVG.setAttributeNS(null, "viewBox", "0 0 90 90");
      my_SVG.setAttributeNS(null, "height", "80px");
      my_SVG.setAttributeNS(null, "width", "80px");

      //my_SVG.className='my-svg';
      //my_SVG.classList.add('my-svg');
      //my_SVG.setAttribute('class','my-svg');
      my_SVG.setAttributeNS(null, 'class', 'my-svg');

      var checkMark = document.createElementNS('xlmns', 'path');

      //checkMark.className='checkMark';
      //checkMark.classList.add('checkMark');
      //checkMark.setAttribute('class','checkMark');
      checkMark.setAttributeNS(null, 'class', 'checkMark');
      checkMark.setAttributeNS(null, 'd', "M25 37 L35 47 L55 32");

      my_SVG.appendChild(checkMark);
      contianer.appendChild(my_SVG);
    }

    createSVG();
  </script>

</body>

</html>

最佳答案

var xlmns = "http://www.w3.org/2000/xhtml";
var my_SVG = document.createElementNS('xlmns','svg');
                                      ^^^^^^^


错了该函数的第一个参数应该是您使用的名称空间的URI。由于您在该处加上了引号,所以它是一个字符串,而不是您在上一行中创建的变量。因此,该字符串将被解释为您当前网站上的相对路径,例如http://example.com/path/to/htmlfile/xlmns,而不是w3 DTD。

同样,在元级别上,您可能应该称xmlnsXML N ame S pace),xlm只是低音混音。

关于javascript - 用javascript创建了SVG,但它不会连接到CSS或显示在浏览器中。有解决方案吗?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38226548/

10-09 18:05
查看更多