Как использовать несколько элементов SVG

Question

Как использовать несколько элементов SVG

1

Я загружаю кучу элементов SVG и произвольно позиционирую их на экране. Каждый раз, когда приложение загружается, пользователь получает другую композицию, и некоторые элементы могут повторяться, в то время как некоторые могут даже не отображаться.

Первоначально у меня был список файлов SVG, каждый из которых имеет элемент. Но, похоже, есть две проблемы с этим подходом:

1) Слишком много HTTP-запросов;

2) Эти элементы содержат идентификаторы с определениями стилей и градиентов (а не классы - стили, уже установленные в строке при экспорте из Illustrator), а некоторые из них в конечном итоге влияют на другие элементы. Решение обеих проблем состояло бы в том, чтобы все элементы были только в одном файле SVG, поэтому Adobe Illustrator назначит разные идентификаторы для каждого элемента, и стили не будут конфликтовать.

Моя идея заключается в том, чтобы загрузить большой SVG файл со всеми этими элементами, извлечь их с помощью select() и добавить их в элементы DOM.

Все это звучит разумно?

Могу ли я использовать JavaScript для загрузки одного SVG, управления элементами, содержащимися в этом, и добавлять их в DOM по желанию, или это ужасная идея?

Я пытался, но это было очень больно. Например, мне пришлось использовать SnapSVG, чтобы иметь возможность находить эти внутренние элементы внутри моего SVG, но я не могу добавить их в DOM. Вероятно, SnapSVG не подходит для этого. Я видел другие инструменты SVG, но они, похоже, скорее предназначены для создания форм SVG с использованием JavaScript, но это не мой случай, я просто хочу извлекать элементы и использовать их (добавлять к другим элементам, позиции, пути доступа к ним и изменять цвет, переводить и т.д.).

zok 05 фев. 2018, в 14:30

Источник

0

Это совершенно разумный подход, который давно используется с изображениями. Посмотрите на это ... css-tricks.com/css-sprites
Archer 05 фев. 2018, в 13:01
0

@ Арчер, ты думаешь, мой комментарий не помог? Я не думаю, что есть что добавить, и я не думаю, что это стоит ответа.
Denys Séguret 05 фев. 2018, в 13:04
1

@Archer Комментарий был полезен imho. Вопрос, похоже, основан на мнении.
Ron 05 фев. 2018, в 13:11
0

@Ron Они удалили комментарий, на который я ссылался.
Archer 05 фев. 2018, в 13:22
0

Да, я спрашиваю мнение о том, как решить эту проблему. Я задал конкретный технический вопрос в другой ветке, но пока он мне не очень помог, и это заставляет меня думать, что я выбрал неправильный подход.
zok 05 фев. 2018, в 13:23

Показать ещё 3 комментария

Теги:

javascript

svg

1 ответ

Ещё вопросы

Это совершенно разумный подход, который давно используется с изображениями. Посмотрите на это ... css-tricks.com/css-sprites
@ Арчер, ты думаешь, мой комментарий не помог? Я не думаю, что есть что добавить, и я не думаю, что это стоит ответа.
@Archer Комментарий был полезен imho. Вопрос, похоже, основан на мнении.
@Ron Они удалили комментарий, на который я ссылался.
Да, я спрашиваю мнение о том, как решить эту проблему. Я задал конкретный технический вопрос в другой ветке, но пока он мне не очень помог, и это заставляет меня думать, что я выбрал неправильный подход.

Niet the Dark Absol · Accepted Answer · 2018-02-05T12-17-00.000Z

Следуя моему ответу на ваш другой вопрос, вы можете захватить элементы из одного SVG в <use/> в другом.

function grabSVGElement(selector) {
    var svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
    var use = document.createElementNS('http://www.w3.org/2000/svg','use');
    use.setAttributeNS('http://www.w3.org/1999/xlink','href',selector);
    svg.appendChild(use);

    document.body.appendChild(svg);
    var bbox = use.getBBox();
    svg.setAttribute("viewBox",[bbox.x,bbox.y,bbox.width,bbox.height].join(" "));
    document.body.removeChild(svg);
    return svg;
}

Это должно создать необходимый SVG и соответствующим образом изменить его ограничивающий прямоугольник, прежде чем возвращать его. (Он временно добавляется в тело, чтобы рассчитать BBox)

Затем вы можете appendChild в любой ваш реальный контейнер и дать ему координаты X, Y по желанию.

Потрясающие. Я бы взял целую вечность, чтобы придумать это. Я не думаю, что нам нужно полагаться на DOM, чтобы делать такие вещи.