Question

我有一个SVG元素，需要在其中包含一些html元素。我使用foreignObject标签来执行此操作。这在普通浏览器上完美运行，但在移动设备上，它没有在foreignObject中显示html。

以下是我的代码：

Comparable

我的异物都没有显示在移动设备上:(。还有其他替代方法使用ForeignObjects吗？我需要它来将HTML插入我的SVG。

谢谢大家。

Answer 1

因此，您当前的示例在桌面浏览器中甚至不适合我。

您将注意到以下示例中没有文字。

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>属性时，桌面浏览器中的所有内容都会加载。最好的部分是它也可以在移动设备上加载。您会注意到以下示例在运行时显示预期的文本。

security.require-ssl=true
server.port: 8443

以下是使用iPhone 5在iOS模拟器中加载的此示例的屏幕截图。

foreignObject不会显示在移动设备上

1 个答案: