SVG s vnořeným HTML a nastavení pozice zobrazeného tagu

[mzprx]

Hrajem sa trochu s SVG ktore ma v sebe vnore html . V SVG mam  svg tag <text> ktory sa snazim prekryt  s html tagom <input> .
 Neviem prist na to, preco napriek tomu ze obidve prvky maju rovnaku poziciu x,y  browser zobrazi  input nizsie .
Preco je to tak , co robim zle ?

https://jsfiddle.net/rckd1tL9/2/

Kód: [Vybrat]

<text
       style="font-size:12.7px;line-height:1.25;font-family:FreeMono;-inkscape-font-specification:FreeMono;white-space:pre;shape-inside:url(#rect70);"
       id="text68"
       xml:space="preserve"><tspan
         x="42.939453"
         y="27.696719"><tspan
           style="font-size:12.7px" id="span" >AAAA</tspan></tspan></text>
        <foreignObject              x="42.939453"
         y="27.696719"     width="10px" height="10px">
                        <input class="w3-input w3-border-0" xmlns="http://www.w3.org/1999/xhtml" type="text" id="pwd" placeholder="Preco som inde ?" name="pswd">               
                        </input>

  </foreignObject>

Kód: [Vybrat]

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   sodipodi:docname="pokus2.svg"
   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
   id="svg8"
   version="1.1"
   viewBox="0 0 210 297"
   height="297mm"
   width="210mm">
  <defs
     id="defs2">
    <rect
       id="rect70"
       height="20.316889"
       width="75.180765"
       y="15.948616"
       x="42.938686" />
  </defs>
      <style>

   input { font-size:12.7px; }
   foreignObject { position: absolute;  overflow: visible;  }

  </style>
  <sodipodi:namedview
     inkscape:window-maximized="1"
     inkscape:window-y="28"
     inkscape:window-x="0"
     inkscape:window-height="977"
     inkscape:window-width="1920"
     showgrid="false"
     inkscape:document-rotation="0"
     inkscape:current-layer="layer1"
     inkscape:document-units="mm"
     inkscape:cy="560"
     inkscape:cx="400"
     inkscape:zoom="0.35"
     inkscape:pageshadow="2"
     inkscape:pageopacity="0.0"
     borderopacity="1.0"
     bordercolor="#666666"
     pagecolor="#ffffff"
     id="base" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1"
     inkscape:groupmode="layer"
     inkscape:label="Layer 1">
    <rect
       style="stroke-width:0.264583;fill: #00cc00;"
       y="46.730953"
       x="37.613617"
       height="81.526443"
       width="125.02882"
       id="rect10" />
    <text
       style="font-size:12.7px;line-height:1.25;font-family:FreeMono;-inkscape-font-specification:FreeMono;white-space:pre;shape-inside:url(#rect70);"
       id="text68"
       xml:space="preserve"><tspan
         x="42.939453"
         y="27.696719"><tspan
           style="font-size:12.7px" id="span" >AAAA</tspan></tspan></text>
        <foreignObject              x="42.939453"
         y="27.696719"     width="10px" height="10px">
                        <input class="w3-input w3-border-0" xmlns="http://www.w3.org/1999/xhtml" type="text" id="pwd" placeholder="Preco som inde ?" name="pswd">               
                        </input> 

  </foreignObject>
  </g>
</svg>

[Reklama]

[honzik1111]

Protože u <tspan> je atribut y "coordinate of the starting point of the text baseline" [1], kdežto u <foreignObject> je y souřadnice levého horního rohu [2].
Tedy přesně to co pozorujete.

[1] https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan
[2] https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject

[honzik1111]

Na co to chcete používat?
Má-li to být něco "cross-browser", mám s <foreignObject> nedobré zkušenosti, hlavně díky tomuto 14 let (!) starému Safari bugu.
https://bugs.webkit.org/show_bug.cgi?id=23113