访问在Adobe Illustrator中创建的SVG DOM /'g'元素

-1

我想要访问SVG文件中具有各种Adobe Illustrator（分层）元素的SVG DOM。理想情况下，我会将HTML滑块范围数字（1-100）与单个“g”元素对齐，并在用户使用滑块时达到该范围数字时显示动画，隐藏和显示。访问在Adobe Illustrator中创建的SVG DOM /'g'元素

请参阅github上的项目： https://github.com/EdBrooks/media-stroke

$(document).ready(function() { 
    var input = document.getElementsByTagName('input')[0]; 
    var svg = $('#svgFile').svg({loadURL: 'img/media_stroke.svg'}); 


    for (i=0; i < svg.length; i++) { 
    var g = document.getElementsByTagName('g'); 
    var g1 = [{0:g}]; 

    console.log(g1); 

    // var g1 = document.getElementById('group1').style.visibility = "hidden"; 

    // var re = [{0:g}]; 

    // console.log(re); 


    } 



    function InputVal() { 
    this.number = 
     $('input'); 
     var change = input.addEventListener('change', function() { 
      var value = this.value 

      console.log(value); 

      if (value == 23) { 

      alert('wow dumb') 

      } 

     }, false); 
    } 

    InputVal(); 

});

来源

2015-06-26 Ed Brooks

对于处理DOM中的SVG元素，你应该总是使用名称空间感知DOM方法。（在这种情况下，'getElementsByTagNameNS'） – CBroe

它看起来像你想在SVG元素执行的操作，做一些动画..对，您可以使用图书馆像Snap.svg这是类似的jQuery的HTML大教堂！

退房是getting started page（寻找第15节）或watch video

来源

2015-06-26 21:07:29

Pratik！非常感谢你。我一直在玩Snap.svg，这正是我正在寻找的。 –

你应该加上一个答案，以便其他人可以轻松找到答案。 –

访问在Adobe Illustrator中创建的SVG DOM /'g'元素

回答

相关问题