Fórum Root.cz
Hlavní témata => Vývoj => Téma založeno: mzprx 01. 03. 2023, 18:13:04
-
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/
<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>
<?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>
-
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
-
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