XHTML元素音频不允许作为SVG元素的子元素

问题描述：

我使用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的子元素。实际上，这对于我认为的音频标签来说实际上是不必要的。 –

答

按照罗伯特Longson的评论，我只是用<foreignObject>生产100％有效的SVG - 注意，它的内容需要在<body>被包裹是有效的。

（我也摆脱了数据属性，因为我想要的代码，以充分验证，即使它们在实践中的浏览器中工作，并且是SVG2规范的一部分。）

<?xml version="1.0" encoding="utf-8"?> 

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    viewBox="0 0 640 640"> 

<defs> 
    <foreignObject width="0" height="0" requiredExtensions="http://www.w3.org/1999/xhtml"> 
     <body xmlns="http://www.w3.org/1999/xhtml"> 
      <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> 
     </body> 
    </foreignObject> 
</defs> 

<title>SVG with audio</title> 

<rect class="trigger" width="640" height="640"> 
    <metadata>consonant_pig</metadata> 
</rect> 

<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() { 
      //console.log(this.querySelector('metadata').textContent); 
      var audio = $('#' + this.querySelector('metadata').textContent + '_audio'); 
      if (audio !== null) { 
       try { audio.currentTime=0; } catch(e) {} audio.play(); 
      } 


     }, false); 
    }); 

})(); 
]]></script> 

</svg>

对于类似于data-*的属性，验证的另一种方法将依赖于id属性或<desc>元素。（如果多个data-*样属性是必需的单个元件上，<metadata>不再是一种选择，因为它不支持class属性，而<desc>一样。）

XHTML元素音频不允许作为SVG元素的子元素

相关推荐