XHTML要素のオーディオがSVG要素の子として許可されていません

SVG、オーディオおよびJavaScriptを使用してインタラクティブなInfographicを作成しています。XHTML要素のオーディオがSVG要素の子として許可されていません

私はしかし、私はURIまたはファイルアップロードを経由して検証しようとすると、このエラーを取得し、 W3C Validatorを使用して直接入力することにより、ドキュメントを検証することができ

：

XHTML要素オーディオはSVG要素の子として許可されていない

私は何が欠けていますか？私は<audio>が標準SVGではないことを理解しています（実際にはdata-*の属性を使用しています）。私が理解できないことは、SVGタグの名前空間宣言が十分でない理由です。ここで

が最小の場合である：ロバートLongsonさんのコメントを1として

<?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の子である必要があります。実際には、これは実際に私が思うオーディオタグに必要なことはありませんでした。 –

、私は単に100％有効なSVGを生成するために<foreignObject>を使用 - その内容が有効であることを<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-*様の属性が単一の要素で必要とされている場合<desc>が行う一方で、<metadata>は、それがclass属性をサポートしていないので、オプションをできなくなります。）

出典

2017-02-16 10:59:02

XHTML要素のオーディオがSVG要素の子として許可されていません

答えて

関連する問題