SVG riadené JavaScriptom v XHTML

SVG riadené JavaScriptom v XHTML

Věrný člen

10. 11. 2007 #1

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.

Prog.0

Věrný člen

10. 11. 2007 #2

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.