SVG 异物内的文本不可见

Question

我用包含 html.

的外来对象创建了 SVG

但是 html 不可见。

可能是什么原因？

<svg
   width="160mm"
   height="297mm"
   viewBox="0 0 160 297"
   version="1.1"
   id="svg8"
   inkscape:version="0.92.3 (2405546, 2018-03-11)"
   sodipodi:docname="aligned.svg">
  <defs
     id="defs2" />
  <g
     inkscape:label="Ebene 1"
     inkscape:groupmode="layer"
     id="layer1">
    <rect
       style="opacity:1;fill:#00ff09;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.26499999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="rect10"
       width="30.994047"
       height="27.214285"
       x="9.8273811"
       y="89.491081" />
    <rect
       style="opacity:1;fill:#00ff09;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.26499999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="rect12"
       width="9.8273811"
       height="76.351196"
       x="57.452377"
       y="64.922623" />
    <ellipse
       style="opacity:1;fill:#00ff09;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.26499999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="path14"
       cx="114.52679"
       cy="103.09822"
       rx="17.008928"
       ry="19.276785" />
    <rect
       style="opacity:1;fill:#378a3a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.26499999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="rect35"
       width="170.08928"
       height="8.3154764"
       x="3.4017856"
       y="98.940483" />
  </g>
     <foreignObject width="100" height="50" requiredExtensions="http://www.w3.org/1999/xhtml">
     
      <div x="50" y="100" width="300" height="300" xmlns="http://www.w3.org/1999/xhtml">
        I want to see this text.
 ##############################
        #####################
      </div>
    </foreignObject>
</svg>

我使用了这个来源：https://wiki.selfhtml.org/wiki/SVG/Elemente/eingebundene_Inhalte/foreignObject那里"requiredExtensions"被使用了。

Answer 1

您的 viewBox="0 80 160 297" 正在剪掉 <foreignObject>，因为它隐式位于 x="0" y="0"。

你在 <div> 上有 x="50" y="100" 没有任何作用。

将 x/y 移动到 foreignObject 或更改 viewBox，这修复了在 Firefox 中的显示。

对于 Chrome 似乎有必要省略 foreignObject 的 requiredExtensions 属性（老实说，我不知道为什么也不知道它有什么用）。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="160mm"
   viewBox="0 80 160 297"
   version="1.1"
   id="svg8"
>
  <defs
     id="defs2" />
  <g
     id="layer1">
    <rect
       style="fill:#00ff09"
       id="rect10"
       width="30.994047"
       height="27.214285"
       x="9.8273811"
       y="89.491081" />
    <rect
       style="fill:#00ff09"
       id="rect12"
       width="9.8273811"
       height="76.351196"
       x="57.452377"
       y="64.922623" />
    <ellipse
       style="fill:#00ff09"
       id="path14"
       cx="114.52679"
       cy="103.09822"
       rx="17.008928"
       ry="19.276785" />
    <rect
       style="fill:#378a3a"
       id="rect35"
       width="170.08928"
       height="8.3154764"
       x="3.4017856"
       y="98.940483" />
  </g>
     <foreignObject x="50" y="100" width="100" height="50">
      <div width="300" height="300" xmlns="http://www.w3.org/1999/xhtml">
        I want to see this text.
 ##############################
        #####################
      </div>
    </foreignObject>
</svg>

Answer 2

移除那个 requiredExtensions 家伙后它起作用了，我不知道它是什么。

<svg
   width="160mm"
   height="297mm"
   viewBox="0 0 160 297"
   version="1.1"
   id="svg8"
   inkscape:version="0.92.3 (2405546, 2018-03-11)"
   sodipodi:docname="aligned.svg">
  <defs
     id="defs2" />
  <g
     inkscape:label="Ebene 1"
     inkscape:groupmode="layer"
     id="layer1">
    <rect
       style="opacity:1;fill:#00ff09;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.26499999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="rect10"
       width="30.994047"
       height="27.214285"
       x="9.8273811"
       y="89.491081" />
    <rect
       style="opacity:1;fill:#00ff09;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.26499999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="rect12"
       width="9.8273811"
       height="76.351196"
       x="57.452377"
       y="64.922623" />
    <ellipse
       style="opacity:1;fill:#00ff09;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.26499999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="path14"
       cx="114.52679"
       cy="103.09822"
       rx="17.008928"
       ry="19.276785" />
    <rect
       style="opacity:1;fill:#378a3a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.26499999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="rect35"
       width="170.08928"
       height="8.3154764"
       x="3.4017856"
       y="98.940483" />
  </g>
     <foreignObject width="100" height="50">
     
      <div x="50" y="100" width="300" height="300" xmlns="http://www.w3.org/1999/xhtml">
        I want to see this text.
 ##############################
        #####################
      </div>
    </foreignObject>
</svg>

SVG 异物内的文本不可见

Text inside SVG foreignobject is not visible

svg

foreignobject