SVG riadené JavaScriptom v XHTML – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

SVG riadené JavaScriptom v XHTML – JavaScript, AJAX, jQuery – Fórum – Programujte.comSVG riadené JavaScriptom v XHTML – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Prog.0
Věrný člen
10. 11. 2007   #1
-
0
-

Robím si objekt na prácu s vektorovou grafikou v XHTML, tak som sa začal trocha špŕať v SVG.

Narazil som na problém, ukážem na zdrojáku:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">

var s;

window.onload = function()
{
// vytvorím SVG element natiahnem ho a do vnútra objektu 'container':
s = document.createElementNS('http://www.w3.org/2000/svg','svg');
document.getElementById('containter').appendChild(s);
s.style.width = '100%'; // 100% - aby sa roztiahol...
s.style.height = '100%'; // ...pri roztiahnutí divu 'container'


// teraz keď do neho kreslím:
// jedna dĺžková jednotka v svg = 1px na obrazovke.
// tento pomer sa nemení, aj keď roztiahnem okno

// napríklad, vytvorím kružnicu: stred=[100,100], polomerom 100.
// => hodnoty budú na obrazovke stále 100px, aj pri zmene veľkosti okna


var c = document.createElementNS('http://www.w3.org/2000/svg','circle');
c.setAttributeNS( null, 'cx' , '100' );
c.setAttributeNS( null, 'cy' , '100' );
c.setAttributeNS( null, 'r' , '100' );
c.setAttributeNS( null, 'fill', '#000' );
s.appendChild(c);
}

// Nasledujúcou funknciou nastavím viewBox na 0 0 200 200.
// Malo by to znamenať to, že nech okno hociako roztiahnem (teda aj svg element),
// mierka sa tak prispôsobí, aby celá oblasť svg elementu predstavovala 200x200 jednotiek.
// teraz sa jedna jednotka nemusí bude rovnať 1px na obrazovke, iba keď
// veľkosť svg elementu bude 200px x 200px.


var make_200x200 = function()
{
s.setAttributeNS(null, 'viewBox','0 0 200 200');

// toto by vyplo zachovávanie pomeru strán:
// s.setAttributeNS(null, 'preserveAspectRatio' , 'none');
}

var make_1_1 = function()
{
// Tu je môj problém. Chcem napísať funkciu, ktorá opäť nastaví
// pomer jedna jednotka svg = 1px na obrazovke, tak ako to bolo pôvodne.
// ale nemám šajnu ako.

// skúšal som toto:
// s.setAttributeNS(null, 'viewBox','');

// aj toto:
// s.setAttributeNS(null, 'viewBox',null);

// a googlim a googlim a googlim a nič nezaberá...

}

</script>
</head><body>
<div id="containter" style="position:absolute;
left:50px;
top:50px;
bottom:50px;
right:50px;
border:double 3px #666;"></div>
<div id="buttons" style="position:absolute;
left:50px;
bottom:10px;
height: 30px;
right:50px;">
<button onclick="make_200x200()" >200x200</button>
<button onclick="make_1_1()" >1:1</button>
</div>
</body></html>



Za každý nápad vopred ďakujem.


Btw, stačí že to bude bežať na Firefoxe (aj keď mi to zbehlo aj na opere. IE sa nechytá).

imho, toto je skôr otázka na DOM SVG, JavaScriptom to len obsluhujem, keď tu je/bude lepšia kategória, prosím presunúť.

Nahlásit jako SPAM
IP: 213.160.186.–
Prog.
Reklama
Reklama
Prog.0
Věrný člen
10. 11. 2007   #2
-
0
-

Hej, v opere mi to fungovalo volaním removeAttributeNS:

svg.removeAttributeNS(null,'viewBox')


Firefoxu to ale nepomohlo :-(

Zatial som to vyriešil tak, že keď budem chcieť pôvodný stav, tak vytvorím nový svg element a všetok obsah starého premiestnim do nového. Potom starý odstránim a na jeho miesto vložím nový, ktorému ešte nebola nastavená hodnota viewBox.

    var make_1_1 = function()

{
var new_s = document.createElementNS('http://www.w3.org/2000/svg','svg');
with(new_s.style) { width = height = '100%' };

while(s.childNodes.length>0) new_s.appendChild(s.childNodes[0]);
with(s.parentNode)
{
removeChild(s);
appendChild(new_s);
};
s = new_s;
}


Toto riešenie funguje FF, O, Safari, pokladnám ho však len za núdzové, neviem ako sa to zachová a hlavne aké rýchle to bude, keď svg bude obsahovať xyz childNodes.

...stále verím v jednoduchšie riešenie :-)

Nahlásit jako SPAM
IP: 213.160.186.–
Prog.
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 13 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý