我正在使用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。同样,在元级别上,您可能应该称
xmlns
(XML
N
ame S
pace),xlm
只是低音混音。关于javascript - 用javascript创建了SVG,但它不会连接到CSS或显示在浏览器中。有解决方案吗?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38226548/