Autor Zpráva
ondra15
Profil
Dobrý den, mám následující problém:
mám obrázek v svg formátu, kde jeho zdrojový kód (xml formát) mám vložený v externím souboru (např. svg.inc) uložený do proměnné A. Tento soubor načtu do jiného souboru, kde vypíšu proměnnou A, tedy vykreslím obrázek. Nyní potřebuji tento obrázek upravovat pomocí klikací mapy map. Zdrojový kód obrázku neobsahuje usemap. Tuto proměnnou jsem vložil do xml kódu a mám pocit, že to nefunguje.
Ani při vložení xml kódu přímo do souboru, kde je mám map. Taky to nefunguje.

Dokázal by mi někdo poradit, jestli je moje myšlenka vůbec realizovatelná?

<map name="RghtImgM">
          <area shape='rect' coords='0, 0, 103, 58' title='Left side' onclick='document.getElementById(\"RghtI\").src=\"../img/header/PZW_L.png\"'>
          <area shape='rect' coords='103, 0, 206, 58' title='Right side' nohref onclick='document.getElementById(\"RghtI\").src=\"../img/header/PZW_R.png\"'>
        </map>
a volaná proměnná z ext. souboru
<div id='imgRght'>${A} </div>
Ext. soubor (xml kod) obrazku je dlouhy:
[pre]A="
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<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'
width='185.03397'
height='60.683182'
id='svg2'
usemap='#RghtImgM'
inkscape:label='Pozadí'
version='1.1'
inkscape:version='0.48.1 '
sodipodi:docname='Drawing5.svg'>
<defs
id='defs5608' />
<sodipodi:namedview
id='base'
pagecolor='#444'
bordercolor='#444'
borderopacity='1.0'
inkscape:pageopacity='0.0'
inkscape:pageshadow='2'
inkscape:zoom='4'
inkscape:cx='80.584111'
inkscape:cy='52.566922'
inkscape:document-units='px'
inkscape:current-layer='layer1'
showgrid='false'
fit-margin-top='0'
fit-margin-left='0'
fit-margin-right='0'
fit-margin-bottom='0'
inkscape:window-width='1280'
inkscape:window-height='962'
inkscape:window-x='-8'
inkscape:window-y='-8'
inkscape:window-maximized='1'
showguides='true'
inkscape:guide-bbox='true'>
<sodipodi:guide
orientation='0,1'
position='-19.445437,85.206368'
id='guide6468' />
</sodipodi:namedview>
<metadata
id='metadata5611'>
<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 />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label='Vrstva 1'
inkscape:groupmode='layer'
id='layer1'
transform='translate(-136.05445,-573.44917)'>
<g
transform='matrix(0.24916609,0,0,0.25156614,136.72863,573.43584)'
id='103'>
<path
style='fill:#e8e8ff'
inkscape:connector-curvature='0'
id='path5549'
class='st1'
d='M 0,0 740,0 740,240 0,240 0,0 z' />
</g>
<g
transform='matrix(0.24870156,0,0,0.24870156,208.6753,598.46518)'
id='111'>
<path
style='fill:#5583bf;stroke:#5583bf;stroke-width:4.02088356;stroke-linejoin:bevel'
inkscape:connector-curvature='0'
id='repeater'
class='st2'
d='m 148,60 c 6.63,0 12,-5.37 12,-12 l 0,-36 C 160,5.37 154.63,0 148,0 L 12,0 C 5.37,0 0,5.37 0,12 l 0,36 c 0,6.63 5.37,12 12,12 l 136,0 z' />
</g>
<g
transform='matrix(0.24870156,0,0,0.23939587,208.69023,586.0301)'
id='123'>
<path
style='fill:none;stroke:#666666;stroke-width:8px;stroke-linejoin:bevel'
inkscape:connector-curvature='0'
id='druha_cara'
class='st4'
d='m 0,0 39.94,0 0,50' />
</g>
<g
transform='matrix(0.24870156,0,0,0.24870156,248.48248,576.08204)'
id='125'>
<g
transform='translate(0,13.33)'
id='115'>
<path
style='fill:#5583bf;stroke:#5583bf;stroke-width:4.02088356;stroke-linejoin:bevel'
inkscape:connector-curvature='0'
id='antena_3a'
class='st2'
d='m 14.74,53.33 c 6.63,0 12,-5.37 12,-12 l 0,-29.33 c 0,-6.63 -5.37,-12 -12,-12 L 12,0 C 5.37,0 0,5.37 0,12 l 0,29.33 c 0,6.63 5.37,12 12,12 l 2.74,0 z' />
</g>
<g
transform='matrix(0,-1,1,0,6.67,80)'
id='116'>
<path
style='fill:#5583bf;stroke:#5583bf;stroke-width:4.02088356;stroke-linejoin:bevel'
inkscape:connector-curvature='0'
id='antena_3b'
class='st2'
d='m 0,40.11 a 40,40 0 1 1 80,0 l -80,0 z' />
</g>
</g>
<g
transform='matrix(-0.24870156,0,0,0.24870156,208.69023,576.08204)'
id='126'>
<g
transform='translate(0,13.33)'
id='127'>
<path
style='fill:#5583bf;stroke:#5583bf;stroke-width:4.02088356;stroke-linejoin:bevel'
inkscape:connector-curvature='0'
id='antena_2a'
class='st2'
d='m 14.74,53.33 c 6.63,0 12,-5.37 12,-12 l 0,-29.33 c 0,-6.63 -5.37,-12 -12,-12 L 12,0 C 5.37,0 0,5.37 0,12 l 0,29.33 c 0,6.63 5.37,12 12,12 l 2.74,0 z' />
</g>
<g
transform='matrix(0,-1,1,0,6.67,80)'
id='128'>
<path
style='fill:#5583bf;stroke:#5583bf;stroke-width:4.02088356;stroke-linejoin:bevel'
inkscape:connector-curvature='0'
id='antena_2b'
class='st2'
d='m 0,40.11 a 40,40 0 1 1 80,0 l -80,0 z' />
</g>
</g>
<g
transform='matrix(0.24870156,0,0,0.24870156,155.70187,598.46518)'
id='zdroj_1'>
<path
style='fill:#5583bf;stroke:#5583bf;stroke-width:4.02088356;stroke-linejoin:bevel'
inkscape:connector-curvature='0'
id='path5572'
class='st2'
d='m 74.19,60 c 6.63,0 12,-5.37 12,-12 l 0,-36 c 0,-6.63 -5.37,-12 -12,-12 L 12,0 C 5.37,0 0,5.37 0,12 l 0,36 c 0,6.63 5.37,12 12,12 l 62.19,0 z' />
</g>
<g
transform='matrix(0.24870156,0,0,0.24870156,177.13746,576.08204)'
id='134'>
<g
transform='translate(0,13.33)'
id='135'>
<path
style='fill:#5583bf;stroke:#5583bf;stroke-width:4.02088356;stroke-linejoin:bevel'
inkscape:connector-curvature='0'
id='antena_1a'
class='st2'
d='m 14.74,53.33 c 6.63,0 12,-5.37 12,-12 l 0,-29.33 c 0,-6.63 -5.37,-12 -12,-12 L 12,0 C 5.37,0 0,5.37 0,12 l 0,29.33 c 0,6.63 5.37,12 12,12 l 2.74,0 z' />
</g>
<g
transform='matrix(0,-1,1,0,6.67,80)'
id='136'>
<path
style='fill:#5583bf;stroke:#5583bf;stroke-width:4.02088356;stroke-linejoin:bevel'
inkscape:connector-curvature='0'
id='antena_1b'
class='st2'
d='m 0,40.11 a 40,40 0 1 1 80,0 l -80,0 z' />
</g>
</g>
<g
transform='matrix(0.24870156,0,0,0.24870156,280.0054,598.46518)'
id='140'>
<path
style='fill:#5583bf;stroke:#5583bf;stroke-width:4.02088356;stroke-linejoin:bevel'
inkscape:connector-curvature='0'
id='zdroj_2'
class='st2'
d='m 71.19,60 c 6.63,0 12,-5.37 12,-12 l 0,-36 c 0,-6.63 -5.37,-12 -12,-12 L 12,0 C 5.37,0 0,5.37 0,12 l 0,36 c 0,6.63 5.37,12 12,12 l 59.19,0 z' />
</g>
<g
transform='matrix(-0.24870156,0,0,0.24870156,280.0054,576.08204)'
id='148'>
<g
transform='translate(0,13.33)'
id='149'>
<path
style='fill:#5583bf;stroke:#5583bf;stroke-width:4.02088356;stroke-linejoin:bevel'
inkscape:connector-curvature='0'
id='antena_4a'
class='st2'
d='m 14.74,53.33 c 6.63,0 12,-5.37 12,-12 l 0,-29.33 c 0,-6.63 -5.37,-12 -12,-12 L 12,0 C 5.37,0 0,5.37 0,12 l 0,29.33 c 0,6.63 5.37,12 12,12 l 2.74,0 z' />
</g>
<g
transform='matrix(0,-1,1,0,6.67,80)'
id='150'>
<path
style='fill:#5583bf;stroke:#5583bf;stroke-width:4.02088356;stroke-linejoin:bevel'
inkscape:connector-curvature='0'
id='antena_4b'
class='st2'
d='m 0,40.11 a 40,40 0 1 1 80,0 l -80,0 z' />
</g>
</g>
<g
transform='matrix(0.23715309,0,0,0.23950455,176.63984,586.0301)'
id='157'>
<path
style='fill:none;stroke:#666666;stroke-width:8px'
inkscape:connector-curvature='0'
id='prvni_cara'
class='st4'
d='m 0,0 -43.09,0 0,50' />
</g>
<g
transform='matrix(0.2377845,0,0,0.24870156,248.04514,586.0301)'
id='158'>
<path
style='fill:none;stroke:#666666;stroke-width:8px;stroke-linejoin:bevel'
inkscape:connector-curvature='0'
id='ctvrta_cara'
class='st4'
d='m 0,0 -40.06,0 0,48.115211' />
</g>
<g
transform='matrix(0.23738361,0,0,0.23912572,280.47611,586.0301)'
id='159'>
<path
style='fill:none;stroke:#666666;stroke-width:8px;stroke-linejoin:bevel'
inkscape:connector-curvature='0'
id='pata_cara'
class='st4'
d='m 0,0 41.59,0 0,50' />
</g>
<text
xml:space='preserve'
style='f
margin
Profil *
V případě SVG formátu se klikazí oblasti dělakí jinak.
http://www.fix-it.cz/cz/svg-odkazy
ondra15
Profil
margin:
Děkuji za odkaz. Nyní zjišťuji, že asi budu trošku na slepé cestě. Mám obrázek ve kterém je strana A a strana B. Když vyberu stranu A, potřebuji zneprůhlednit (zakázat) stranu B tak, že nastavím průhlednost = 0 překrývající vrstvě na straně B. Zjistil jsem, že ve formátu svg nelze nastavit dva příkazy funkci onclick.

Dokázal by mi někdo alespoň trošku napovědět, jestli by se do svg dal vložit javascript? Nebo jak řešit, aby se na jedno kliknutí provedly dva příkazy (strana A nezakryta, strana B zakryta). A při kliknutí na stranu B aby bylo možno provést inverzní operaci.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: