如何将JS正确嵌入SVG?我想做一个时钟，我想在CSS，但JS的作品。这是我的代码:
<svg version="1.1" width="200" height="200" display="block" tranform="translate(-50%,-50%)" xmlns="https://www.w3.org/2000/svg">
<filter id="innerShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
<feOffset in="blur" dx="2.5" dy="2.5" />
</filter>
<g>
<circle
id="shadow"
style="fill:rgba(0,0,0,.1)"
cx="97"
cy="100"
r="87"
filter="url(#innerShadow)"
></circle>
<circle
id="circle"
style="stroke:#fff;stroke-width:12px;fill:#20b7af"
cx="100"
cy="100"
r="80"
></circle>
</g>
<g>
<line
x1="100"
y1="100"
x2="100"
y2="55"
transform="rotate(80 100 100)"
style="stroke-width:3px;stroke:#fffbf9"
id="hourhand"
>
<animatetransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="43200s"
repeatCount="indefinite"
/>
</line>
<line
x1="100"
y1="100"
x2="100"
y2="40"
style="stroke-width:4px;stroke:#fdfdfd"
id="minutehand"
>
<animatetransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="3600s"
repeatCount="indefinite"
/>
</line>
<line
x1="100"
y1="100"
x2="100"
y2="30"
style="stroke-width:2px;stroke:#c1efed"
id="secondhand"
>
<animatetransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="60s"
repeatCount="indefinite"
/>
</line>
</g>
<circle
id="center"
style="fill:#128a86;stroke:#c1efed;stroke-width:2px"
cx="100"
cy="100"
r="3"
></circle>
<line x1="100" y1="20" x2="100" y2="40" transform="rotate(30 100 100)" stroke="#ffffff"></line>
<line x1="100" y1="20" x2="100" y2="40" transform="rotate(60 100 100)" stroke="#ffffff"></line>
<line x1="100" y1="20" x2="100" y2="40" transform="rotate(90 100 100)" stroke="#ffffff"></line>
<line x1="100" y1="20" x2="100" y2="40" transform="rotate(120 100 100)" stroke="#ffffff"></line>
<line x1="100" y1="20" x2="100" y2="40" transform="rotate(150 100 100)" stroke="#ffffff"></line>
<line x1="100" y1="20" x2="100" y2="40" transform="rotate(180 100 100)" stroke="#ffffff"></line>
<line x1="100" y1="20" x2="100" y2="40" transform="rotate(210 100 100)" stroke="#ffffff"></line>
<line x1="100" y1="20" x2="100" y2="40" transform="rotate(240 100 100)" stroke="#ffffff"></line>
<line x1="100" y1="20" x2="100" y2="40" transform="rotate(270 100 100)" stroke="#ffffff"></line>
<line x1="100" y1="20" x2="100" y2="40" transform="rotate(300 100 100)" stroke="#ffffff"></line>
<line x1="100" y1="20" x2="100" y2="40" transform="rotate(330 100 100)" stroke="#ffffff"></line>
<line x1="100" y1="20" x2="100" y2="40" transform="rotate(360 100 100)" stroke="#ffffff"></line>
<script type="text/javascript">
var hands = [];
hands.push(document.querySelector('#secondhand > *'));
hands.push(document.querySelector('#minutehand > *'));
hands.push(document.querySelector('#hourhand > *'));
function shifter(val) {
return [val, 100, 100].join(' ');
}
var date = new Date();
var hoursAngle = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minuteAngle = 360 * date.getMinutes() / 60;
var secAngle = 360 * date.getSeconds() / 60;
hands[0].setAttribute('from', shifter(secAngle));
hands[0].setAttribute('to', shifter(secAngle + 360));
hands[1].setAttribute('from', shifter(minuteAngle));
hands[1].setAttribute('to', shifter(minuteAngle + 360));
hands[2].setAttribute('from', shifter(hoursAngle));
hands[2].setAttribute('to', shifter(hoursAngle + 360));
</script>
</svg>如果这是不可能的我理解，但我想要一个解决方案。我正在跑步。当我打开它时，它给出了这个XML文档树
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<svg xmlns="https://www.w3.org/2000/svg" version="1.1" width="200" height="200" display="block" tranform="translate(-50%,-50%)">
<filter id="innerShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"/>
<feOffset in="blur" dx="2.5" dy="2.5"/>
</filter>
<g>
<circle id="shadow" style="fill:rgba(0,0,0,.1)" cx="97" cy="100" r="87" filter="url(#innerShadow)"/>
<circle id="circle" style="stroke:#fff;stroke-width:12px;fill:#20b7af" cx="100" cy="100" r="80"/>
</g>
<g>
<line x1="100" y1="100" x2="100" y2="55" transform="rotate(80 100 100)" style="stroke-width:3px;stroke:#fffbf9" id="hourhand">
<animatetransform attributeName="transform" attributeType="XML" type="rotate" dur="43200s" repeatCount="indefinite"/>
</line>
<line x1="100" y1="100" x2="100" y2="40" style="stroke-width:4px;stroke:#fdfdfd" id="minutehand">
<animatetransform attributeName="transform" attributeType="XML" type="rotate" dur="3600s" repeatCount="indefinite"/>
</line>
<line x1="100" y1="100" x2="100" y2="30" style="stroke-width:2px;stroke:#c1efed" id="secondhand">
<animatetransform attributeName="transform" attributeType="XML" type="rotate" dur="60s" repeatCount="indefinite"/>
</line>
</g>
<circle id="center" style="fill:#128a86;stroke:#c1efed;stroke-width:2px" cx="100" cy="100" r="3"/>
<line x1="100" y1="20" x2="100" y2="40" transform="rotate(30 100 100)" stroke="#ffffff"/>
<line x1="100" y1="20" x2="100" y2="40" transform="rotate(60 100 100)" stroke="#ffffff"/>
<line x1="100" y1="20" x2="100" y2="40" transform="rotate(90 100 100)" stroke="#ffffff"/>
<line x1="100" y1="20" x2="100" y2="40" transform="rotate(120 100 100)" stroke="#ffffff"/>
<line x1="100" y1="20" x2="100" y2="40" transform="rotate(150 100 100)" stroke="#ffffff"/>
<line x1="100" y1="20" x2="100" y2="40" transform="rotate(180 100 100)" stroke="#ffffff"/>
<line x1="100" y1="20" x2="100" y2="40" transform="rotate(210 100 100)" stroke="#ffffff"/>
<line x1="100" y1="20" x2="100" y2="40" transform="rotate(240 100 100)" stroke="#ffffff"/>
<line x1="100" y1="20" x2="100" y2="40" transform="rotate(270 100 100)" stroke="#ffffff"/>
<line x1="100" y1="20" x2="100" y2="40" transform="rotate(300 100 100)" stroke="#ffffff"/>
<line x1="100" y1="20" x2="100" y2="40" transform="rotate(330 100 100)" stroke="#ffffff"/>
<line x1="100" y1="20" x2="100" y2="40" transform="rotate(360 100 100)" stroke="#ffffff"/>
<script type="text/javascript"> var hands = []; hands.push(document.querySelector('#secondhand > *')); hands.push(document.querySelector('#minutehand > *')); hands.push(document.querySelector('#hourhand > *')); function shifter(val) { return [val, 100, 100].join(' '); } var date = new Date(); var hoursAngle = 360 * date.getHours() / 12 + date.getMinutes() / 2; var minuteAngle = 360 * date.getMinutes() / 60; var secAngle = 360 * date.getSeconds() / 60; hands[0].setAttribute('from', shifter(secAngle)); hands[0].setAttribute('to', shifter(secAngle + 360)); hands[1].setAttribute('from', shifter(minuteAngle)); hands[1].setAttribute('to', shifter(minuteAngle + 360)); hands[2].setAttribute('from', shifter(hoursAngle)); hands[2].setAttribute('to', shifter(hoursAngle + 360)); </script>
</svg>
如果我添加!CDATA[[script]]，它只是给出一个简单的错误。就像在x行检测到错误一样
SVG文件可以链接到JavaScript文件，也可以在script元素中包含JavaScript。在后一种情况下，既然SVG是XML，您需要将所有JS代码放在CDATA元素中。在<![CDATA[和]]>前面有//，因为这两个标签不是JavaScript，但它仍然是有效的XML。
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<filter height="140%" id="innerShadow" width="140%" x="-20%" y="-20%">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="3"/>
<feOffset dx="2.5" dy="2.5" in="blur"/>
</filter>
<g>
<circle cx="97" cy="100" filter="url(#innerShadow)" id="shadow" r="87" style="fill:rgba(0,0,0,.1)"/>
<circle cx="100" cy="100" id="circle" r="80" style="stroke:#fff;stroke-width:12px;fill:#20b7af"/>
</g>
<g>
<line id="hourhand" style="stroke-width:3px;stroke:#fffbf9" transform="rotate(80 100 100)" x1="100" x2="100" y1="100" y2="55">
<animateTransform attributeName="transform" attributeType="XML" dur="43200s" repeatCount="indefinite" type="rotate"/>
</line>
<line id="minutehand" style="stroke-width:4px;stroke:#fdfdfd" x1="100" x2="100" y1="100" y2="40">
<animateTransform attributeName="transform" attributeType="XML" dur="3600s" repeatCount="indefinite" type="rotate"/>
</line>
<line id="secondhand" style="stroke-width:2px;stroke:#c1efed" x1="100" x2="100" y1="100" y2="30">
<animateTransform attributeName="transform" attributeType="XML" dur="60s" repeatCount="indefinite" type="rotate"/>
</line>
</g>
<circle cx="100" cy="100" id="center" r="3" style="fill:#128a86;stroke:#c1efed;stroke-width:2px"/>
<line stroke="#ffffff" transform="rotate(30 100 100)" x1="100" x2="100" y1="20" y2="40"/>
<line stroke="#ffffff" transform="rotate(60 100 100)" x1="100" x2="100" y1="20" y2="40"/>
<line stroke="#ffffff" transform="rotate(90 100 100)" x1="100" x2="100" y1="20" y2="40"/>
<line stroke="#ffffff" transform="rotate(120 100 100)" x1="100" x2="100" y1="20" y2="40"/>
<line stroke="#ffffff" transform="rotate(150 100 100)" x1="100" x2="100" y1="20" y2="40"/>
<line stroke="#ffffff" transform="rotate(180 100 100)" x1="100" x2="100" y1="20" y2="40"/>
<line stroke="#ffffff" transform="rotate(210 100 100)" x1="100" x2="100" y1="20" y2="40"/>
<line stroke="#ffffff" transform="rotate(240 100 100)" x1="100" x2="100" y1="20" y2="40"/>
<line stroke="#ffffff" transform="rotate(270 100 100)" x1="100" x2="100" y1="20" y2="40"/>
<line stroke="#ffffff" transform="rotate(300 100 100)" x1="100" x2="100" y1="20" y2="40"/>
<line stroke="#ffffff" transform="rotate(330 100 100)" x1="100" x2="100" y1="20" y2="40"/>
<line stroke="#ffffff" transform="rotate(360 100 100)" x1="100" x2="100" y1="20" y2="40"/>
<script type="text/javascript">
//<![CDATA[
var hands = [];
console.log(hands);
hands.push(document.querySelector('#secondhand >*'));
hands.push(document.querySelector('#minutehand >*'));
hands.push(document.querySelector('#hourhand >*'));
function shifter(val) {
return [val, 100, 100].join(' ');
}
var date = new Date();
var hoursAngle = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minuteAngle = 360 * date.getMinutes() / 60;
var secAngle = 360 * date.getSeconds() / 60;
hands[0].setAttribute('from', shifter(secAngle));
hands[0].setAttribute('to', shifter(secAngle + 360));
hands[1].setAttribute('from', shifter(minuteAngle));
hands[1].setAttribute('to', shifter(minuteAngle + 360));
hands[2].setAttribute('from', shifter(hoursAngle));
hands[2].setAttribute('to', shifter(hoursAngle + 360));
//]]></script>
</svg>
显示时钟既可以作为HTML中的嵌入代码，也可以作为对SVG文件的引用。在后一种情况下，您需要在HTML中使用object或embed元素。如果你需要JS代码来运行，你就不能在CSS或img元素中引用SVG文件……在这里，我使用与上面完全相同的代码创建了一个具有数据URI的对象元素(因为我不能在ST上引用真正的文件):
<object width="200" height="200" data="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZmlsdGVyIGhlaWdodD0iMTQwJSIgaWQ9ImlubmVyU2hhZG93IiB3aWR0aD0iMTQwJSIgeD0iLTIwJSIgeT0iLTIwJSI+CiAgICA8ZmVHYXVzc2lhbkJsdXIgaW49IlNvdXJjZUdyYXBoaWMiIHJlc3VsdD0iYmx1ciIgc3RkRGV2aWF0aW9uPSIzIi8+CiAgICA8ZmVPZmZzZXQgZHg9IjIuNSIgZHk9IjIuNSIgaW49ImJsdXIiLz4KICA8L2ZpbHRlcj4KICA8Zz4KICAgIDxjaXJjbGUgY3g9Ijk3IiBjeT0iMTAwIiBmaWx0ZXI9InVybCgjaW5uZXJTaGFkb3cpIiBpZD0ic2hhZG93IiByPSI4NyIgc3R5bGU9ImZpbGw6cmdiYSgwLDAsMCwuMSkiLz4KICAgIDxjaXJjbGUgY3g9IjEwMCIgY3k9IjEwMCIgaWQ9ImNpcmNsZSIgcj0iODAiIHN0eWxlPSJzdHJva2U6I2ZmZjtzdHJva2Utd2lkdGg6MTJweDtmaWxsOiMyMGI3YWYiLz4KICA8L2c+CiAgPGc+CiAgICA8bGluZSBpZD0iaG91cmhhbmQiIHN0eWxlPSJzdHJva2Utd2lkdGg6M3B4O3N0cm9rZTojZmZmYmY5IiB0cmFuc2Zvcm09InJvdGF0ZSg4MCAxMDAgMTAwKSIgeDE9IjEwMCIgeDI9IjEwMCIgeTE9IjEwMCIgeTI9IjU1Ij4KICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBhdHRyaWJ1dGVUeXBlPSJYTUwiIGR1cj0iNDMyMDBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdHlwZT0icm90YXRlIi8+CiAgICA8L2xpbmU+CiAgICA8bGluZSBpZD0ibWludXRlaGFuZCIgc3R5bGU9InN0cm9rZS13aWR0aDo0cHg7c3Ryb2tlOiNmZGZkZmQiIHgxPSIxMDAiIHgyPSIxMDAiIHkxPSIxMDAiIHkyPSI0MCI+CiAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgYXR0cmlidXRlVHlwZT0iWE1MIiBkdXI9IjM2MDBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdHlwZT0icm90YXRlIi8+CiAgICA8L2xpbmU+CiAgICA8bGluZSBpZD0ic2Vjb25kaGFuZCIgc3R5bGU9InN0cm9rZS13aWR0aDoycHg7c3Ryb2tlOiNjMWVmZWQiIHgxPSIxMDAiIHgyPSIxMDAiIHkxPSIxMDAiIHkyPSIzMCI+CiAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgYXR0cmlidXRlVHlwZT0iWE1MIiBkdXI9IjYwcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHR5cGU9InJvdGF0ZSIvPgogICAgPC9saW5lPgogIDwvZz4KICA8Y2lyY2xlIGN4PSIxMDAiIGN5PSIxMDAiIGlkPSJjZW50ZXIiIHI9IjMiIHN0eWxlPSJmaWxsOiMxMjhhODY7c3Ryb2tlOiNjMWVmZWQ7c3Ryb2tlLXdpZHRoOjJweCIvPgogIDxsaW5lIHN0cm9rZT0iI2ZmZmZmZiIgdHJhbnNmb3JtPSJyb3RhdGUoMzAgMTAwIDEwMCkiIHgxPSIxMDAiIHgyPSIxMDAiIHkxPSIyMCIgeTI9IjQwIi8+CiAgPGxpbmUgc3Ryb2tlPSIjZmZmZmZmIiB0cmFuc2Zvcm09InJvdGF0ZSg2MCAxMDAgMTAwKSIgeDE9IjEwMCIgeDI9IjEwMCIgeTE9IjIwIiB5Mj0iNDAiLz4KICA8bGluZSBzdHJva2U9IiNmZmZmZmYiIHRyYW5zZm9ybT0icm90YXRlKDkwIDEwMCAxMDApIiB4MT0iMTAwIiB4Mj0iMTAwIiB5MT0iMjAiIHkyPSI0MCIvPgogIDxsaW5lIHN0cm9rZT0iI2ZmZmZmZiIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDEwMCAxMDApIiB4MT0iMTAwIiB4Mj0iMTAwIiB5MT0iMjAiIHkyPSI0MCIvPgogIDxsaW5lIHN0cm9rZT0iI2ZmZmZmZiIgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDEwMCAxMDApIiB4MT0iMTAwIiB4Mj0iMTAwIiB5MT0iMjAiIHkyPSI0MCIvPgogIDxsaW5lIHN0cm9rZT0iI2ZmZmZmZiIgdHJhbnNmb3JtPSJyb3RhdGUoMTgwIDEwMCAxMDApIiB4MT0iMTAwIiB4Mj0iMTAwIiB5MT0iMjAiIHkyPSI0MCIvPgogIDxsaW5lIHN0cm9rZT0iI2ZmZmZmZiIgdHJhbnNmb3JtPSJyb3RhdGUoMjEwIDEwMCAxMDApIiB4MT0iMTAwIiB4Mj0iMTAwIiB5MT0iMjAiIHkyPSI0MCIvPgogIDxsaW5lIHN0cm9rZT0iI2ZmZmZmZiIgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDEwMCAxMDApIiB4MT0iMTAwIiB4Mj0iMTAwIiB5MT0iMjAiIHkyPSI0MCIvPgogIDxsaW5lIHN0cm9rZT0iI2ZmZmZmZiIgdHJhbnNmb3JtPSJyb3RhdGUoMjcwIDEwMCAxMDApIiB4MT0iMTAwIiB4Mj0iMTAwIiB5MT0iMjAiIHkyPSI0MCIvPgogIDxsaW5lIHN0cm9rZT0iI2ZmZmZmZiIgdHJhbnNmb3JtPSJyb3RhdGUoMzAwIDEwMCAxMDApIiB4MT0iMTAwIiB4Mj0iMTAwIiB5MT0iMjAiIHkyPSI0MCIvPgogIDxsaW5lIHN0cm9rZT0iI2ZmZmZmZiIgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDEwMCAxMDApIiB4MT0iMTAwIiB4Mj0iMTAwIiB5MT0iMjAiIHkyPSI0MCIvPgogIDxsaW5lIHN0cm9rZT0iI2ZmZmZmZiIgdHJhbnNmb3JtPSJyb3RhdGUoMzYwIDEwMCAxMDApIiB4MT0iMTAwIiB4Mj0iMTAwIiB5MT0iMjAiIHkyPSI0MCIvPgogIDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4KICAgIC8vPCFbQ0RBVEFbCiAgICB2YXIgaGFuZHMgPSBbXTsKICAgIGNvbnNvbGUubG9nKGhhbmRzKTsKICAgIGhhbmRzLnB1c2goZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI3NlY29uZGhhbmQgPionKSk7CiAgICBoYW5kcy5wdXNoKGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNtaW51dGVoYW5kID4qJykpOwogICAgaGFuZHMucHVzaChkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjaG91cmhhbmQgPionKSk7CiAgICAKICAgIGZ1bmN0aW9uIHNoaWZ0ZXIodmFsKSB7CiAgICAgIHJldHVybiBbdmFsLCAxMDAsIDEwMF0uam9pbignICcpOwogICAgfQogICAgCiAgICB2YXIgZGF0ZSA9IG5ldyBEYXRlKCk7CiAgICB2YXIgaG91cnNBbmdsZSA9IDM2MCAqIGRhdGUuZ2V0SG91cnMoKSAvIDEyICsgZGF0ZS5nZXRNaW51dGVzKCkgLyAyOwogICAgdmFyIG1pbnV0ZUFuZ2xlID0gMzYwICogZGF0ZS5nZXRNaW51dGVzKCkgLyA2MDsKICAgIHZhciBzZWNBbmdsZSA9IDM2MCAqIGRhdGUuZ2V0U2Vjb25kcygpIC8gNjA7CgogICAgaGFuZHNbMF0uc2V0QXR0cmlidXRlKCdmcm9tJywgc2hpZnRlcihzZWNBbmdsZSkpOwogICAgaGFuZHNbMF0uc2V0QXR0cmlidXRlKCd0bycsIHNoaWZ0ZXIoc2VjQW5nbGUgKyAzNjApKTsKICAgIGhhbmRzWzFdLnNldEF0dHJpYnV0ZSgnZnJvbScsIHNoaWZ0ZXIobWludXRlQW5nbGUpKTsKICAgIGhhbmRzWzFdLnNldEF0dHJpYnV0ZSgndG8nLCBzaGlmdGVyKG1pbnV0ZUFuZ2xlICsgMzYwKSk7CiAgICBoYW5kc1syXS5zZXRBdHRyaWJ1dGUoJ2Zyb20nLCBzaGlmdGVyKGhvdXJzQW5nbGUpKTsKICAgIGhhbmRzWzJdLnNldEF0dHJpYnV0ZSgndG8nLCBzaGlmdGVyKGhvdXJzQW5nbGUgKyAzNjApKTsKICAgIC8vXV0+PC9zY3JpcHQ+Cjwvc3ZnPg=="></object>