1. 首頁
  2. 問答
  3. foreignObject不顯示在移動設備上

foreignObject不顯示在移動設備上

2016-07-05 184 views
1

我有一個SVG元素，它需要一些html元素。我正在使用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我需要它插入HTML到我SVG

。

謝謝大家。

來源

2016-07-05 Z S

回答

0

所以，當前的例子，即使在桌面瀏覽器工作不適合我。

你會注意到在下面的考試沒有文本PLE。

<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>

下面是截圖這個例子加載了iOS模擬器與iPhone 5

mobile screenshot

來源

2016-07-05 00:48:19 Seth

+0

哇，非常感謝！ –

相關問題

 相關問題