Подтвердить что ты не робот

Scripting <path> данные в SVG (чтение и изменение)

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

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

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

Итак, я попытался найти ответы, но, как я уже сказал, я не нашел информацию, которая мне нужна, или, может быть, я просто не понимаю, что она мне показала.

4b9b3361

ОТВЕТЫ

Ответ 1

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

  • Как вставлять script в SVG файл?
  • Как запустить script внутри SVG файла?
  • Как получить доступ к данным для элемента <path> из script?
  • Как я могу манипулировать данными для элемента <path> из script?

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

Как вставлять script внутри SVG файла?

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

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

Как и в случае с HTML, вы можете либо поместить код script непосредственно в документ, либо ссылаться на внешний файл. При выполнении последнего вы должны использовать атрибут href (не 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>

Как запустить script внутри 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> из script?

Существует два способа доступа к большей информации об элементах в SVG: вы можете либо получить доступ к атрибуту в виде строки с помощью стандартного метода DOM Level 1 Core 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>

Вышеупомянутый script выводит следующий результат:

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

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

  • Минусы: Сладкие chimpunks a-flame, посмотрите на этот код! И это даже не обрабатывает все доступные доступные сегменты пути.

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

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

Аналогично вышесказанному вы можете создать новую строку и использовать 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).

Ответ 2

Элементы динамического пути в 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