foreignObjectがモバイルデバイスに表示されない

私はいくつかのhtml要素が必要なSVG要素を持っています。私はこれを行うためにforeignObjectタグを使用しています。これは通常のブラウザではうまく動作しますが、携帯端末ではforeignObject内にhtmlが表示されません。以下はforeignObjectがモバイルデバイスに表示されない

私のコードです：。

<div class="container"> 
    <svg class="background-svg" width="100" height="300px" viewBox="0 0 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
     <defs> 
     <filter x="" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1"> 
      <feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> 
      <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> 
      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.095 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix> 
      <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset> 
      <feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur> 
      <feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite> 
      <feColorMatrix values="0 0 0 0 0.647959184 0 0 0 0 0.549016553 0 0 0 0 0.549016553 0 0 0 0.35 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix> 
      <feMerge> 
       <feMergeNode in="shadowMatrixOuter1"></feMergeNode> 
       <feMergeNode in="SourceGraphic"></feMergeNode> 
       <feMergeNode in="shadowMatrixInner1"></feMergeNode> 
      </feMerge> 
     </filter> 
     </defs> 
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
     <g id="Artboard-1" fill="#8B65E4"> 
      <path d="M187.785156,200 L180,232 L66,232 L58.2148437,200 L187.785156,200 Z" id="Rectangle-1" filter="url(#filter-1)"></path> 
      <path d="M349.760339,49.1234675 L375.905579,277.733833 L199.999999,277.733834 L43.9648432,143.710938 L349.760339,49.1234675 Z" id="Triangle-1" filter="url(#filter-1)"></path> 
      <path d="M399.8936,96.1889997 L29.4623426,250.140552 L0,36.4302476 L399.8936,96.1889997 Z" id="Triangle-2" filter="url(#filter-1)"></path> 
      <foreignObject x="0%" y="0%" width="80%" height="100%" 
       requiredExtensions="http://www.w3.org/1999/xhtml"> 
       <body xmlns="http://www.w3.org/1999/xhtml"> 
        <div xmlns="http://www.w3.org/1999/xhtml"> 
        <h1> 
         Words appear here on normal browsers but not on mobile devices 
        </h1> 
        </div> 
       </body> 
      </foreignObject> 
     </g> 
     <foreignObject x="20%" y="70%" width="80%" height="100%" 
      requiredExtensions="http://www.w3.org/1999/xhtml"> 
      <body xmlns="http://www.w3.org/1999/xhtml"> 
       <div xmlns="http://www.w3.org/1999/xhtml"> 
        <div class="box"> 
        <a class="box-item" href="https://website.com/info" target="_blank">link</a> 
        </div> 
       </div> 
      </body> 
     </foreignObject> 
     </g> 
    </svg> 
</div>

どちらも私の異物がモバイルデバイス:(上に表示されませんForeignObjectsを使用するいくつかの他の代替があります私は私のSVGにHTMLを挿入するためにそれを必要と

？。

おかげでみんな。

出典

2016-07-05 Z S

だから、あなたの現在の例でも、デスクトップブラウザで私のために働いていません。

あなたは、以下の試験には、テキストを気づかないだろうプレ

<div class="container"> 
 
    <svg class="background-svg" width="100" height="300px" viewBox="0 0 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <defs> 
 
     <filter x="" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1"> 
 
     <feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> 
 
     <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> 
 
     <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.095 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix> 
 
     <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset> 
 
     <feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur> 
 
     <feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite> 
 
     <feColorMatrix values="0 0 0 0 0.647959184 0 0 0 0 0.549016553 0 0 0 0 0.549016553 0 0 0 0.35 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix> 
 
     <feMerge> 
 
      <feMergeNode in="shadowMatrixOuter1"></feMergeNode> 
 
      <feMergeNode in="SourceGraphic"></feMergeNode> 
 
      <feMergeNode in="shadowMatrixInner1"></feMergeNode> 
 
     </feMerge> 
 
     </filter> 
 
    </defs> 
 
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
 
     <g id="Artboard-1" fill="#8B65E4"> 
 
     <path d="M187.785156,200 L180,232 L66,232 L58.2148437,200 L187.785156,200 Z" id="Rectangle-1" filter="url(#filter-1)"></path> 
 
     <path d="M349.760339,49.1234675 L375.905579,277.733833 L199.999999,277.733834 L43.9648432,143.710938 L349.760339,49.1234675 Z" id="Triangle-1" filter="url(#filter-1)"></path> 
 
     <path d="M399.8936,96.1889997 L29.4623426,250.140552 L0,36.4302476 L399.8936,96.1889997 Z" id="Triangle-2" filter="url(#filter-1)"></path> 
 
     <foreignObject x="0%" y="0%" width="80%" height="100%" requiredExtensions="http://www.w3.org/1999/xhtml"> 
 

 
      <body xmlns="http://www.w3.org/1999/xhtml"> 
 
      <div xmlns="http://www.w3.org/1999/xhtml"> 
 
       <h1> 
 
         Words appear here on normal browsers but not on mobile devices 
 
        </h1> 
 
      </div> 
 
      </body> 
 
     </foreignObject> 
 
     </g> 
 
     <foreignObject x="20%" y="70%" width="80%" height="100%" requiredExtensions="http://www.w3.org/1999/xhtml"> 
 

 
     <body xmlns="http://www.w3.org/1999/xhtml"> 
 
      <div xmlns="http://www.w3.org/1999/xhtml"> 
 
      <div class="box"> 
 
       <a class="box-item" href="https://website.com/info" target="_blank">link</a> 
 
      </div> 
 
      </div> 
 
     </body> 
 
     </foreignObject> 
 
    </g> 
 
    </svg> 
 
</div>

しかし、私はデスクトップブラウザでforeignObject、すべての負荷からrequiredExtension属性を削除する場合。最も重要なことは、それが私のためにモバイルにも読み込まれることです。以下の例は、実行時に意図したテキストを表示していることに気付くでしょう。

<div class="container"> 
 
    <svg class="background-svg" width="100" height="300px" viewBox="0 0 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <defs> 
 
     <filter x="" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1"> 
 
     <feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> 
 
     <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> 
 
     <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.095 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix> 
 
     <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset> 
 
     <feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur> 
 
     <feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite> 
 
     <feColorMatrix values="0 0 0 0 0.647959184 0 0 0 0 0.549016553 0 0 0 0 0.549016553 0 0 0 0.35 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix> 
 
     <feMerge> 
 
      <feMergeNode in="shadowMatrixOuter1"></feMergeNode> 
 
      <feMergeNode in="SourceGraphic"></feMergeNode> 
 
      <feMergeNode in="shadowMatrixInner1"></feMergeNode> 
 
     </feMerge> 
 
     </filter> 
 
    </defs> 
 
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
 
     <g id="Artboard-1" fill="#8B65E4"> 
 
     <path d="M187.785156,200 L180,232 L66,232 L58.2148437,200 L187.785156,200 Z" id="Rectangle-1" filter="url(#filter-1)"></path> 
 
     <path d="M349.760339,49.1234675 L375.905579,277.733833 L199.999999,277.733834 L43.9648432,143.710938 L349.760339,49.1234675 Z" id="Triangle-1" filter="url(#filter-1)"></path> 
 
     <path d="M399.8936,96.1889997 L29.4623426,250.140552 L0,36.4302476 L399.8936,96.1889997 Z" id="Triangle-2" filter="url(#filter-1)"></path> 
 
     <foreignObject x="0%" y="0%" width="80%" height="100%"> 
 

 
      <body xmlns="http://www.w3.org/1999/xhtml"> 
 
      <div> 
 
       <h1> 
 
         Words appear here on normal browsers but not on mobile devices 
 
        </h1> 
 
      </div> 
 
      </body> 
 
     </foreignObject> 
 
     </g> 
 
     <foreignObject x="20%" y="70%" width="80%" height="100%"> 
 

 
     <body xmlns="http://www.w3.org/1999/xhtml"> 
 
      <div> 
 
      <div class="box"> 
 
       <a class="box-item" href="https://website.com/info" target="_blank">link</a> 
 
      </div> 
 
      </div> 
 
     </body> 
 
     </foreignObject> 
 
    </g> 
 
    </svg> 
 
</div>

ここではiPhone 5

出典

2016-07-05 00:48:19 Seth

うわー、おかげでたくさん持つのiOSシミュレータにロードされたこの例のスクリーンショットです！ –

foreignObjectがモバイルデバイスに表示されない

答えて

関連する問題