我正致力于使用 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 创建它时，它不会设置样式。有没有解决的办法。我还注意到大多数使用 javascript 创建 SVG 元素的文档都在 MDN 上，比如 createElementNS();更重要的是，这是否意味着这在 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。
此外，在元级别上，您可能应该调用 xmlns (XML Name Space ), xlm 只是低沉的低音。
关于javascript - 在 javascript 中创建了 SVG，但它不会连接到 CSS 或显示在浏览器中。任何解决方案？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38226548/