Web sayfasında dönen SVG öğesini canlandırın

Web sayfamda gömülü Inkscape'de oluşturulmuş bir SVG dosyası var ve yavaşça dönmesini istiyorum. Javascript kullanarak ve animasyon komutlarını doğrudan SVG'ye eklemeyi denedim, ancak hiçbir şey işe yaramıyor. Bu bir görev için JS kütüphanesinin tamamını yüklemek istemiyorum.Web sayfasında dönen SVG öğesini canlandırın

<html> 
    <body bgcolor="#333333"> 
     <embed src="gear.svg" id="gear" width="1000" height="1000" style="position: absolute; top: -500px; left: -500px;" /> 
     <script type="text/javascript"> 
      var gear = document.getElementById("gear"); 
      window.setInterval(function() { 
       // Somehow animate the gear. 
      }, 10); 
     </script> 
    </body> 
</html>

kaynak

2010-06-08 Zarkonnen

İlginç bir konu, çünkü AFAIK şu anda Firefox, SVG'deki animasyonu desteklemiyor.
Bu yüzden biraz araştırma yaptım ve bir çalışma çözümü buldum. Adobe plug-in, Opera 10.51, Safari 4.0.5, Chrome 5.0 ile Firefox 3.6, IE7'de test edilmiştir.
SVG alanının arka planı IE7, Safari ve Chrome'da saydamlığa sahip değil ... nesnesini etiketiyle deneyebilirim (IE tarafından desteklenmeyen, muhtemelen bazı koşullu HTML'ye gereksinim duyuyor ...).

[DÜZENLEME] Tamam, iyi, Adobe SVG eklentisi tarafından desteklenmemektedir daha standart nesneyi ( HTML ... tanımlanmıştır hiç gömmek) IE dışındaki kullanmak değişti. İkincisi, gömülmüş nesnesinin saydamlığına sahip olması için bir öznitelik eklemesine izin verir. Webkit tabanlı tarayıcılar için saydamlık yok: bkz. object embedded in HTML: default background should be transparent hata.

HTML kodu:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
         "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
    <head> 
     <title>Animating SVG</title> 
    </head> 
    <body bgcolor="#CCAAFF" onload="RotateSVG()"> 
     <!--[if !IE]> --> 
     <object id="gear" data="gear.svg" type="image/svg+xml" 
       width="500" height="500" 
       style="position: absolute; top: -250px; left: -250px;"> 
     <!--<![endif]--> 
      <embed id="gear" src="gear.svg" type="image/svg+xml" 
        width="500" height="500" wmode="transparent" 
        style="position: absolute; top: -250px; left: -250px;"/> 
     <!--[if !IE]> --> 
     </object> 
     <!--<![endif]--> 

     <div onclick="RotateSVG()" 
       style="position: absolute; top: 250px; background-color: #ACF;">Start/Stop</p> 

     <script type="text/javascript"> 
var animator; 
var angle = 0; 
function RotateSVG() 
{ 
    if (animator != null) 
    { 
     // Just stop 
     clearInterval(animator); 
     animator = null; 
     return; 
    } 

    var svgTag = document.getElementById("gear"); 
    var svgDoc = null; 
    try 
    { 
     // Most modern browsers understand this 
     svgDoc = svgTag.getSVGDocument(); 
    } 
    catch (ex) {} // Ignore error 
    if (svgDoc == undefined) 
    { 
     svgDoc = svgTag.contentDocument; // For old Mozilla? 
     if (svgDoc == undefined) 
     { 
      alert("Cannot get SVG document"); 
      return; 
     } 
    } 

    var gear = svgDoc.getElementById("gearG"); 
    if (gear == null) 
    { 
     alert("Cannot find gearG group"); 
     return; 
    } 

    animator = setInterval(
     function() 
     { 
      angle += 5; 
      gear.setAttribute("transform", "rotate(" + angle + " 250 250)"); 
     }, 100); 
} 
     </script> 
    </body> 
</html>

kullandığım SVG kodu (sadece kimlik önemlidir, SVG Mozilla SVG Project dan):

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    version="1.1" 
    baseProfile="full"> 
<!-- http://www.mozilla.org/projects/svg/ --> 
    <g id="gearG" fill-opacity="0.7" stroke="black" stroke-width="0.1cm"> 
    <circle cx="6cm" cy="2cm" r="100" fill="red" 
        transform="translate(0,50)" /> 
    <circle cx="6cm" cy="2cm" r="100" fill="blue" 
        transform="translate(70,150)" /> 
    <circle cx="6cm" cy="2cm" r="100" fill="green" 
        transform="translate(-70,150)" /> 
    </g> 
</svg>

kaynak

2010-06-08 12:23:12 PhiLho

<svg> içindeki her şeyi sarar senin <svg> öğenin içinde bir <g> öğesi ekleyin ve bu <g> elemanın bir çocuk olarak <animateTransform type="rotate" attributeName="transform" values="0 cx cy;360 cx cy" dur="30s"/> ekleyin ve "cx" ve "değiştirin: Bu defa ne var Cy "döndürme merkezi olarak kullanmak istediğiniz gerçek mutlak nokta ile, örneğin" 100 300 ". IE9 dışında, yeni nesil web tarayıcılarında çalışmalıdır.
CSS3 2d dönüştürmelerini kullanarak dönüşümü canlandırın, bu işlem sırasında en az üç farklı önek kullanmanız gerektiğini unutmayın (-webkit-transform, -moz-transform, -o-transform). En yeni nesil web tarayıcılarında çalışmalı, IE9'dan emin değilsiniz.
<svg> içindeki her şeyi sarar senin <svg> öğenin içinde bir <g> öğesi ekleyin, sonra, bir window.setInterval zamanlayıcı gelen yourGelement.setAttribute("transform", "rotate(" + (newRotation++) + " cx cy)") yapar içindeki bir <script> eklemek daha önce olduğu gibi dönme sizin merkezi ile cx ve cy değiştirin. Bu çözüm, 10 satırdan az kod olmalı ve bildirimsel (SMIL) animasyonları desteklemeyen eski uygulamalarda bile iyi çalışmalıdır (ör. IE9, Firefox2, Safari3).

kaynak

2010-06-08 09:26:26

İyi, tam cevap, benden daha hızlıydı ! :-) FF3 şimdi Smil animasyonunu destekliyor mu? Henüz denemedim. – PhiLho

Firefox 3.7 alpha I, en azından parçalarını desteklemektedir: http://blog.dholbert.org/2009/10/smil-enabled-by-default-on-nightly.html. Http://dev.w3.org/SVG/profiles/1.1F2/test/harness/, w3c svg testsuite karşı kendinizi test etmek için çekinmeyin –

Web sayfasında dönen SVG öğesini canlandırın

cevap

İlgili konular