【发布时间】：2016-11-06 17:08:50
【问题描述】：
我有一个 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 中。
谢谢大家。
【问题讨论】：