0

我用一个包含 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”。

4

2 回答 2

2

你viewBox="0 80 160 297"正在剪掉<foreignObject>，因为它隐含在x="0" y="0".

你什么都不做x="50" y="100"。<div>

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

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

<?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>

于 2019-11-21T09:40:50.380 回答
1

删除那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>

于 2019-11-21T10:50:27.383 回答