问foreignObject不会出现在移动设备上
EN

Stack Overflow用户

提问于 2016-07-05 08:26:30

回答 0查看 169关注 0票数 1

我有一个SVG元素，其中需要一些html元素。我使用foreignObject标签来做这件事。这在普通浏览器上工作得很好，但在移动设备上，它不会显示foreignObject中的html。

下面是我的代码：

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

谢谢大家。

html

dom

svg

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38193671

复制

相似问题

问foreignObject不会出现在移动设备上
EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问foreignObject不会出现在移动设备上EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问foreignObject不会出现在移动设备上
EN