1
我使用SVG,音频和一些JavaScript创建交互式信息图。XHTML元素音频不允许作为SVG元素的子元素
我可以验证使用W3C Validator通过直接输入文档,但是,我在尝试通过URI或文件上传验证时,此错误:
XHTML元素的音频不允许作为SVG元素的子
我错过了什么?我明白<audio>
是不是标准的SVG(实际上使用data-*
属性同上)。我不明白的是为什么SVG标签中的名称空间声明不够用。
这里是一个最低限度的情况下:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:html="http://www.w3.org/1999/xhtml"
viewBox="0 0 640 640">
<defs>
<audio id="consonant_pig_audio" xmlns="http://www.w3.org/1999/xhtml"><source type="audio/mpeg" src="https://bilingueanglais.com/tmp/ipa-infographic-preview-v1/audio/IPA-PIG.mp3"/></audio>
</defs>
<title>SVG with audio</title>
<rect class="trigger" width="640" height="640" data-target="consonant_pig" />
<script><![CDATA[
/** Shortcut to querySelector **/
function $(sel) { return document.querySelector(sel); }
function $all(sel) { return document.querySelectorAll(sel); }
/** Execute when the SVG is ready **/
(function() {
$all('.trigger').forEach(function(element) {
element.addEventListener('click', function() {
var audio = $('#' + this.getAttribute('data-target') + '_audio');
if (audio !== null) {
try { audio.currentTime=0; } catch(e) {} audio.play();
}
}, false);
});
})();
]]></script>
</svg>
验证器是旧的,DATA-属性和音频是新的(正在进行中的SVG 2规范的一部分)。 –
@RobertLongson这会使我的SVG在SVG 1.1下有效吗? –
在SVG 1.1中,非SVG名称空间中的所有元素都应严格为foreignObject的子元素。实际上,这对于我认为的音频标签来说实际上是不必要的。 –