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>

來源

2017-02-13 Fabien Snauwaert

驗證器是舊的，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>一樣。）

來源

2017-02-16 10:59:02

XHTML元素音頻不允許作爲SVG元素的子元素

回答

相關問題