Скриптовые данные в SVG (чтение и изменение)

кто-нибудь действительно может мне помочь, пожалуйста? Я искал способы запуска скриптов для моего SVG. Но все, что у меня есть, не совпадает! И в нем недостаточно информации, почему он использовал этот набор кодов. Например, одно используемое событие.цель, другое событие.getTarget (), и еще одно событие.цель.возвращение null.данные. Кто-нибудь может мне помочь?

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

пример путь прямо СВГ? Что мне нужно, так это получить эти координаты, возможно, поместить их в переменная, и используйте ее в качестве координат для другого svg. Так как я могу это сделать? Другое дело, как я могу изменить эти координаты, введя номера в интерфейс.

25
graphics javascript scalable svg

2 ответов

похоже, у вас может быть четыре вопроса:

  1. как встроить скрипт в SVG-файл?
  2. как запустить скрипт внутри SVG-файла?
  3. как получить доступ к данным для <path> элемент из скрипта?
  4. как я могу манипулировать данными на <path> элемент из скрипта?

давайте решать их по одному за раз:

как встроить скрипт в SVG-файл?

As описано в спецификация SVG вы можете <script> элемент в вашем документе, чтобы содержать код JavaScript. Согласно последним спецификациям SVG,вам не нужно указывать type атрибут для вашего сценария. Значение по умолчанию type="application/ecmascript".

  • другие распространенные типы mime включают "text/javascript", "text/ecmascript" (указано в SVG 1.1), "application/javascript" и "application/x-javascript". У меня нет подробной информации о поддержке браузера для всех эти, или за опущение в целом. У меня всегда был хороший успех с text/javascript.

как и в случае HTML, вы можете либо поместить код скрипта непосредственно в документ, либо ссылаться на внешний файл. При выполнении последнего вы должны использовать (не src) для URI, с атрибутом в xlink пространство имен.

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <script xlink:href="/js/mycode.js" />
  <script><![CDATA[
    // Wrap the script in CDATA since SVG is XML and you want to be able to write
    // for (var i=0; i<10; ++i )
    // instead of having to write
    // for (var i=0; i&lt;10; ++i )
  ]]></script>
</svg>

как запустить скрипт внутри SVG-файла?

как с HTML, код, включенный в ваш документ SVG, будет запущен, как только он будет обнаружен. Если вы поместите свой <script> элемент над остальной частью вашего документа (как вы могли бы при вводе <script> на <head> HTML-документа), то ни один из ваших элементов документа не будет доступен при запуске кода.

самый простой способ избежать этого-разместите свой <script> элементы в нижней части документа:

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- all SVG content here, above the script -->
  <script><![CDATA[
    // Now I can access the full DOM of my document
  ]]></script>
</svg>

кроме того, вы можете создать обратный вызов функция в верхней части документа, которая вызывается только тогда, когда остальная часть документа готова:

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  <title>SVG Coordinates for Embedded XHTML Elements</title>
  <script>document.documentElement.addEventListener('load',function(){
    // This code runs once the 'onload' event fires on the root SVG element
    console.log( document.getElementById('foo') );
  },false)</script>
  <path id="foo" d="M0 0" />
</svg>

как получить доступ к данным для <path> элемент из скрипта?

существует два способа доступа к большей части информации об элементах в SVG: вы можете либо получить доступ к атрибуту в виде строки через стандартный DOM Level 1 Core method getAttribute(), или вы можете использовать SVG DOM объекты и методы. Давайте посмотрим на оба:

доступ к данным путь через getAttribute()

используя getAttribute() возвращает ту же строку, что и при просмотре источника:

<path id="foo" d="M150 0 L75 200 L225 200 Z" />
<script><![CDATA[
  var path = document.getElementById('foo');
  var data = path.getAttribute('d');
  console.log(data);
  //-> "M150 0 L75 200 L225 200 Z"
]]></script>
  • Плюсы: очень просто позвонить; вам не нужно ничего знать о SVG DOM
  • Con: поскольку вы возвращаете строку, вы должны сами разобрать атрибут; для SVG <path> данные, это может быть мучительно.

доступ к данным пути через SVG DOM методы

<path id="foo" d="M150 0 L75 200 L225 200 Z" />
<script><![CDATA[
  var path = document.getElementById('foo');

  // http://www.w3.org/TR/SVG/paths.html#__svg__SVGAnimatedPathData__normalizedPathSegList
  // See also path.pathSegList and path.animatedPathSegList and path.animatedNormalizedPathSegList
  var segments = path.normalizedPathSegList ;

  for (var i=0,len=segments.numberOfItems;i<len;++i){
    var pathSeg = segments.getItem(i);
    // http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSeg
    switch(pathSeg.pathSegType){
      case SVGPathSeg.PATHSEG_MOVETO_ABS:
        // http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSegMovetoAbs
        console.log("Move to",pathSeg.x,pathSeg.y);
      break;
      case SVGPathSeg.PATHSEG_LINETO_ABS:
        // http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSegLinetoAbs
        console.log("Line to",pathSeg.x,pathSeg.y);
      break;
      case SVGPathSeg.PATHSEG_CLOSEPATH:
        // http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSegClosePath
        console.log("Close Path");
      break;
    }
  }
]]></script>

приведенный выше скрипт выдает следующий вывод:

Move to 150 0
Line to 75 200
Line to 225 200
Close Path

  • Pros: данные пути анализируются для Вас; Вы получаете точные номера из самого API; используя normalizedPathSegList принимает относительные команды и делает их абсолютными для вас; если анимация SMIL изменяет данные пути, использование не анимированного pathSegList может дать вам доступ к базовой, не анимированной информации, недоступной через getAttribute().

  • Плюсы: Сладкий шимпанзе а-флейм, посмотрите на этот код! И это даже не обрабатывает все возможные сегменты пути, доступные.

поскольку может быть трудно прочитать спецификации W3C для SVG DOM, много лет назад я создал онлайн-инструмент для просмотра существующих свойств и объектов. Вы можете использовать его здесь: http://objjob.phrogz.net/svg/hierarchy

как я могу манипулировать данными на <path> элемент из скрипта

аналогично выше вы можете создать новую строку и использовать setAttribute() чтобы засунуть его на объект, или вы можете управлять SVG DOM.

управление данными пути с помощью setAttribute() 

<path id="foo" d="M150 0 L75 200 L225 200 Z" />
<script><![CDATA[
  var path = document.getElementById('foo');
  path.setAttribute('d','M150,0 L150,100 200,300 Z');
]]></script>

управление данными пути с помощью SVG DOM

<path id="foo" d="M150,0 L75,200 l150,0 Z" />
<script><![CDATA[
  var path = document.getElementById('foo');
  var segments = path.pathSegList;
  segments.getItem(2).y = -10;
]]></script>

в общем, вам просто нужно изменить свойства различных SVGPathSeg экземпляры подкласса; изменения вносятся немедленно в DOM. (В приведенном выше примере исходный треугольник искривлен, поскольку последняя точка слегка приподнялся.)

когда вам нужно создать новые сегменты пути, вам нужно использовать такие методы, как var newSegment = myPath.createSVGPathSegArcAbs(100,200,10,10,Math.PI/2,true,false) а затем используйте один из методов, чтобы вставить этот сегмент в список, например segments.appendItem(newSegment).

93

элементы динамического пути в SVG с поддержкой Javascript и Css

var XMAX = 500;
    var YMAX = 500;
    var _xx=10;
    var _reg=100;
    var _l=10;
    // Create PATH element
    for(var x=1;x<20;x++)
    {
    var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");
    pathEl.setAttribute('d','M'+_l+' 100 Q 100  300 '+_l+' 500' );
    pathEl.style.stroke = 'rgb('+(_reg)+',0,0)';
    pathEl.style.strokeWidth = '5';
    pathEl.style.fill = 'none';
        $(pathEl).mousemove(function(evt){$(this).css({"strokeWidth":"3","stroke":"#ff7200"}).hide(100).show(500).css({"stroke":"#51c000"})});

    document.querySelector('svg').appendChild(pathEl);
    _l+=50;
    }

демо на jsfiddle

5