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

您在x="50" y="100"上拥有<div>，什么也没做。

将x/y移至foreignObject或更改viewBox，此修复程序将在Firefox中显示。

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

foreignObject

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异物内的文本不可见

2 个答案: