foreignObject не отображается на мобильных устройствах

У меня есть элемент SVG, который должен содержать некоторые элементы html. Для этого я использую тэг foreignObject. Это отлично работает в обычных браузерах, но на мобильных устройствах, не отображая html внутри объекта foreignObject.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

Итак, ваш текущий пример даже не работает для меня в настольных браузерах.

Вы не заметите никакого текста в поле ниже экзамена 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>

Однако, когда я удалить атрибут requiredExtension из 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%"> 
 

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

источник

2016-07-05 00:48:19 Seth

Вау, спасибо !!! –

foreignObject не отображается на мобильных устройствах

ответ

Смежные вопросы