Как определить или ссылаться на переменную в SVG?

Возможно, вам не нужны переменные для статических изображений, но это было бы легче проверить их и увидеть связанные части, когда все будет определено с точки зрения переменных, IMO. Это также упрощает обновление изображений. Посмотрите, как вы создаете инженерный чертеж, основанный на ограничениях, в SolidWorks. Это в основном делает размеры одного объекта относительно размера (или другого свойства) другого. Можно ли аналогичным образом определить целое число (ширина) или задать ширину другого объекта путем ссылки на ширину ссылочного объекта?

ОТВЕТЫ

Ответ 1

Спецификация переменных параметров SVG будет делать то, что вы хотите, но это вряд ли когда-либо будет завершено, а тем более реализовано UA. Вместо этого SVG выглядит так, будто он будет перемещаться по атрибутам, являющимся параметрами CSS, с которых вы могли бы использовать CSS Calc.

Для вас есть свет в конце туннеля, хотя эта спецификация уже реализована с помощью javascript-прокладки, поэтому, если вы используете это, у вас есть готовое падение в библиотеке, которое делает то, что вы хотите.

Синтаксис выглядит так...

<object type="image/svg+xml" data="map.svg">
  <param name="x" value="125" />
  <param name="y" value="108" />
</object>

или

<object type="image/svg+xml" data="map.svg?y=103&x=523">
</object>

использование выглядит так...

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 320">
<script type="text/ecmascript" xlink:href="ref2.js" />

<ref id="paramX" param="x" default="-10"/>
<ref id="paramY" param="y" default="-10"/>

<circle id="coord" cx="url(#paramX)" cy="url(#paramY)" r="5" fill="tan" stroke="brown" stroke-width="3" />

Библиотека может быть получена здесь

Ответ 2

Простой ответ - нет.

Вы можете определить некоторые вещи, такие как градиенты, маски, шаблоны и фильтры относительно объекта, к которому они применяются. Вы также можете определить некоторые элементы относительно размера родительского SVG. Однако вы не можете определить форму одного элемента относительно другого элемента. В SVG нет таких переменных, как переменные.

Что вы можете сделать, так это динамически генерировать (или изменять) SVG с помощью Javascript.

Ответ 3

Библиотека, на которую ссылается Роберт, дала мне проблемы, поэтому я написал более простую функцию, которая, похоже, работает.

Добавьте это в файл.js и включите его в нижней части вашего SVG внутри тега svg.

var svgns = "http://www.w3.org/2000/svg";
var xlinkns = "http://www.w3.org/1999/xlink";

GetParams();

function GetParams()
{
    var sParams = document.defaultView.location.href.split("?")[1].split("&");
    var oObjects = document.getElementsByClassName('Dynamic');


    for (i = 0; i < sParams.length; i++) {

        var sName = sParams[i].split('=')[0]
        var sValue = sParams[i].split('=')[1]

        for (j = 0; j < oObjects.length; j++) {
            oObjects[j].setAttribute(sName, sValue)
        }

    }
}

Затем любые теги внутри SVG, на которые вы хотите повлиять на параметр, например полигоны, пути, круги и т.д., Добавьте "Dynamic" в качестве имени класса.

Затем вы можете передать параметры через строку запроса источника объекта:

<object type="image/svg+xml" data="yourimage.svg?fill=#FF0000"></object>

Разумеется, это можно изменить, поэтому на разные классы можно ссылаться, если у вас есть разные параметры для отправки, но для меня это работает нормально, так как мне нужны только изменения заполнения.