0

Есть вот такой svg - это простенький qr код. viewBox может быть произвольным, в зависимости от размера текста и значения QRCorrectLevel.

<svg version="1.2" baseProfile="tiny" viewBox="0 0 23 23" fill="#000000"><rect x="0" y="0" width="23" height="23" fill="#ffffff" style="fill: #ffffff !important"></rect><rect x="1" y="1" width="1" height="1"></rect><rect x="2" y="1" width="1" height="1"></rect><rect x="3" y="1" width="1" height="1"></rect><rect x="4" y="1" width="1" height="1"></rect><rect x="5" y="1" width="1" height="1"></rect><rect x="6" y="1" width="1" height="1"></rect><rect x="7" y="1" width="1" height="1"></rect><rect x="9" y="1" width="1" height="1"></rect><rect x="10" y="1" width="1" height="1"></rect><rect x="15" y="1" width="1" height="1"></rect><rect x="16" y="1" width="1" height="1"></rect><rect x="17" y="1" width="1" height="1"></rect><rect x="18" y="1" width="1" height="1"></rect><rect x="19" y="1" width="1" height="1"></rect><rect x="20" y="1" width="1" height="1"></rect><rect x="21" y="1" width="1" height="1"></rect><rect x="1" y="2" width="1" height="1"></rect><rect x="7" y="2" width="1" height="1"></rect><rect x="9" y="2" width="1" height="1"></rect><rect x="10" y="2" width="1" height="1"></rect><rect x="11" y="2" width="1" height="1"></rect><rect x="13" y="2" width="1" height="1"></rect><rect x="15" y="2" width="1" height="1"></rect><rect x="21" y="2" width="1" height="1"></rect><rect x="1" y="3" width="1" height="1"></rect><rect x="3" y="3" width="1" height="1"></rect><rect x="4" y="3" width="1" height="1"></rect><rect x="5" y="3" width="1" height="1"></rect><rect x="7" y="3" width="1" height="1"></rect><rect x="12" y="3" width="1" height="1"></rect><rect x="13" y="3" width="1" height="1"></rect><rect x="15" y="3" width="1" height="1"></rect><rect x="17" y="3" width="1" height="1"></rect><rect x="18" y="3" width="1" height="1"></rect><rect x="19" y="3" width="1" height="1"></rect><rect x="21" y="3" width="1" height="1"></rect><rect x="1" y="4" width="1" height="1"></rect><rect x="3" y="4" width="1" height="1"></rect><rect x="4" y="4" width="1" height="1"></rect><rect x="5" y="4" width="1" height="1"></rect><rect x="7" y="4" width="1" height="1"></rect><rect x="9" y="4" width="1" height="1"></rect><rect x="10" y="4" width="1" height="1"></rect><rect x="11" y="4" width="1" height="1"></rect><rect x="12" y="4" width="1" height="1"></rect><rect x="13" y="4" width="1" height="1"></rect><rect x="15" y="4" width="1" height="1"></rect><rect x="17" y="4" width="1" height="1"></rect><rect x="18" y="4" width="1" height="1"></rect><rect x="19" y="4" width="1" height="1"></rect><rect x="21" y="4" width="1" height="1"></rect><rect x="1" y="5" width="1" height="1"></rect><rect x="3" y="5" width="1" height="1"></rect><rect x="4" y="5" width="1" height="1"></rect><rect x="5" y="5" width="1" height="1"></rect><rect x="7" y="5" width="1" height="1"></rect><rect x="10" y="5" width="1" height="1"></rect><rect x="11" y="5" width="1" height="1"></rect><rect x="15" y="5" width="1" height="1"></rect><rect x="17" y="5" width="1" height="1"></rect><rect x="18" y="5" width="1" height="1"></rect><rect x="19" y="5" width="1" height="1"></rect><rect x="21" y="5" width="1" height="1"></rect><rect x="1" y="6" width="1" height="1"></rect><rect x="7" y="6" width="1" height="1"></rect><rect x="11" y="6" width="1" height="1"></rect><rect x="15" y="6" width="1" height="1"></rect><rect x="21" y="6" width="1" height="1"></rect><rect x="1" y="7" width="1" height="1"></rect><rect x="2" y="7" width="1" height="1"></rect><rect x="3" y="7" width="1" height="1"></rect><rect x="4" y="7" width="1" height="1"></rect><rect x="5" y="7" width="1" height="1"></rect><rect x="6" y="7" width="1" height="1"></rect><rect x="7" y="7" width="1" height="1"></rect><rect x="9" y="7" width="1" height="1"></rect><rect x="11" y="7" width="1" height="1"></rect><rect x="13" y="7" width="1" height="1"></rect><rect x="15" y="7" width="1" height="1"></rect><rect x="16" y="7" width="1" height="1"></rect><rect x="17" y="7" width="1" height="1"></rect><rect x="18" y="7" width="1" height="1"></rect><rect x="19" y="7" width="1" height="1"></rect><rect x="20" y="7" width="1" height="1"></rect><rect x="21" y="7" width="1" height="1"></rect><rect x="9" y="8" width="1" height="1"></rect><rect x="11" y="8" width="1" height="1"></rect><rect x="1" y="9" width="1" height="1"></rect><rect x="3" y="9" width="1" height="1"></rect><rect x="4" y="9" width="1" height="1"></rect><rect x="6" y="9" width="1" height="1"></rect><rect x="7" y="9" width="1" height="1"></rect><rect x="8" y="9" width="1" height="1"></rect><rect x="11" y="9" width="1" height="1"></rect><rect x="15" y="9" width="1" height="1"></rect><rect x="18" y="9" width="1" height="1"></rect><rect x="20" y="9" width="1" height="1"></rect><rect x="21" y="9" width="1" height="1"></rect><rect x="1" y="10" width="1" height="1"></rect><rect x="2" y="10" width="1" height="1"></rect><rect x="3" y="10" width="1" height="1"></rect><rect x="4" y="10" width="1" height="1"></rect><rect x="5" y="10" width="1" height="1"></rect><rect x="11" y="10" width="1" height="1"></rect><rect x="13" y="10" width="1" height="1"></rect><rect x="16" y="10" width="1" height="1"></rect><rect x="18" y="10" width="1" height="1"></rect><rect x="19" y="10" width="1" height="1"></rect><rect x="21" y="10" width="1" height="1"></rect><rect x="3" y="11" width="1" height="1"></rect><rect x="5" y="11" width="1" height="1"></rect><rect x="6" y="11" width="1" height="1"></rect><rect x="7" y="11" width="1" height="1"></rect><rect x="8" y="11" width="1" height="1"></rect><rect x="9" y="11" width="1" height="1"></rect><rect x="10" y="11" width="1" height="1"></rect><rect x="13" y="11" width="1" height="1"></rect><rect x="14" y="11" width="1" height="1"></rect><rect x="15" y="11" width="1" height="1"></rect><rect x="16" y="11" width="1" height="1"></rect><rect x="17" y="11" width="1" height="1"></rect><rect x="20" y="11" width="1" height="1"></rect><rect x="21" y="11" width="1" height="1"></rect><rect x="9" y="12" width="1" height="1"></rect><rect x="13" y="12" width="1" height="1"></rect><rect x="14" y="12" width="1" height="1"></rect><rect x="18" y="12" width="1" height="1"></rect><rect x="20" y="12" width="1" height="1"></rect><rect x="1" y="13" width="1" height="1"></rect><rect x="4" y="13" width="1" height="1"></rect><rect x="7" y="13" width="1" height="1"></rect><rect x="9" y="13" width="1" height="1"></rect><rect x="12" y="13" width="1" height="1"></rect><rect x="14" y="13" width="1" height="1"></rect><rect x="17" y="13" width="1" height="1"></rect><rect x="18" y="13" width="1" height="1"></rect><rect x="20" y="13" width="1" height="1"></rect><rect x="9" y="14" width="1" height="1"></rect><rect x="10" y="14" width="1" height="1"></rect><rect x="14" y="14" width="1" height="1"></rect><rect x="16" y="14" width="1" height="1"></rect><rect x="18" y="14" width="1" height="1"></rect><rect x="20" y="14" width="1" height="1"></rect><rect x="1" y="15" width="1" height="1"></rect><rect x="2" y="15" width="1" height="1"></rect><rect x="3" y="15" width="1" height="1"></rect><rect x="4" y="15" width="1" height="1"></rect><rect x="5" y="15" width="1" height="1"></rect><rect x="6" y="15" width="1" height="1"></rect><rect x="7" y="15" width="1" height="1"></rect><rect x="9" y="15" width="1" height="1"></rect><rect x="10" y="15" width="1" height="1"></rect><rect x="14" y="15" width="1" height="1"></rect><rect x="15" y="15" width="1" height="1"></rect><rect x="17" y="15" width="1" height="1"></rect><rect x="18" y="15" width="1" height="1"></rect><rect x="19" y="15" width="1" height="1"></rect><rect x="1" y="16" width="1" height="1"></rect><rect x="7" y="16" width="1" height="1"></rect><rect x="9" y="16" width="1" height="1"></rect><rect x="11" y="16" width="1" height="1"></rect><rect x="12" y="16" width="1" height="1"></rect><rect x="13" y="16" width="1" height="1"></rect><rect x="14" y="16" width="1" height="1"></rect><rect x="15" y="16" width="1" height="1"></rect><rect x="18" y="16" width="1" height="1"></rect><rect x="19" y="16" width="1" height="1"></rect><rect x="1" y="17" width="1" height="1"></rect><rect x="3" y="17" width="1" height="1"></rect><rect x="4" y="17" width="1" height="1"></rect><rect x="5" y="17" width="1" height="1"></rect><rect x="7" y="17" width="1" height="1"></rect><rect x="10" y="17" width="1" height="1"></rect><rect x="12" y="17" width="1" height="1"></rect><rect x="15" y="17" width="1" height="1"></rect><rect x="19" y="17" width="1" height="1"></rect><rect x="20" y="17" width="1" height="1"></rect><rect x="21" y="17" width="1" height="1"></rect><rect x="1" y="18" width="1" height="1"></rect><rect x="3" y="18" width="1" height="1"></rect><rect x="4" y="18" width="1" height="1"></rect><rect x="5" y="18" width="1" height="1"></rect><rect x="7" y="18" width="1" height="1"></rect><rect x="9" y="18" width="1" height="1"></rect><rect x="10" y="18" width="1" height="1"></rect><rect x="14" y="18" width="1" height="1"></rect><rect x="17" y="18" width="1" height="1"></rect><rect x="18" y="18" width="1" height="1"></rect><rect x="20" y="18" width="1" height="1"></rect><rect x="1" y="19" width="1" height="1"></rect><rect x="3" y="19" width="1" height="1"></rect><rect x="4" y="19" width="1" height="1"></rect><rect x="5" y="19" width="1" height="1"></rect><rect x="7" y="19" width="1" height="1"></rect><rect x="9" y="19" width="1" height="1"></rect><rect x="12" y="19" width="1" height="1"></rect><rect x="14" y="19" width="1" height="1"></rect><rect x="17" y="19" width="1" height="1"></rect><rect x="19" y="19" width="1" height="1"></rect><rect x="1" y="20" width="1" height="1"></rect><rect x="7" y="20" width="1" height="1"></rect><rect x="10" y="20" width="1" height="1"></rect><rect x="11" y="20" width="1" height="1"></rect><rect x="12" y="20" width="1" height="1"></rect><rect x="13" y="20" width="1" height="1"></rect><rect x="15" y="20" width="1" height="1"></rect><rect x="17" y="20" width="1" height="1"></rect><rect x="18" y="20" width="1" height="1"></rect><rect x="21" y="20" width="1" height="1"></rect><rect x="1" y="21" width="1" height="1"></rect><rect x="2" y="21" width="1" height="1"></rect><rect x="3" y="21" width="1" height="1"></rect><rect x="4" y="21" width="1" height="1"></rect><rect x="5" y="21" width="1" height="1"></rect><rect x="6" y="21" width="1" height="1"></rect><rect x="7" y="21" width="1" height="1"></rect><rect x="9" y="21" width="1" height="1"></rect><rect x="10" y="21" width="1" height="1"></rect><rect x="11" y="21" width="1" height="1"></rect><rect x="12" y="21" width="1" height="1"></rect><rect x="13" y="21" width="1" height="1"></rect><rect x="16" y="21" width="1" height="1"></rect></svg>

Есть другой "svg" элемент с viewBox="0 0 500 500". На сколько мне известно, вставлять svg в другой svg можно только с помощью "image", но это не самый удобный вариант, надо предварительно записывать изображение на сервере, а цель именно в динамической вставке qr кода в другой svg элемент с другим значением viewBox.

А если попытаться вставить первый svg (заменив svg на g) во второй, то естественно с координатами будет беда.

Может есть какие-то другие способы как встроить один svg в другой или легко пересчитать координаты для нового viewBox?

1
  • Сейчас проверил, svg вставилось внутрь svg, но является ли это стандартом и можно ли так делать?
    – Floyat
    Commented 10 апр. 2020 в 21:30

1 ответ 1

1

Можешь спокойно вставлять svg в svg https://developer.mozilla.org/ru/docs/Web/SVG/Element/svg

Элемент svg является контейнером, который определяет новую систему координат и область просмотра. Он используется как самый внешний элемент документов SVG, но также может использоваться для встраивания фрагмента SVG в документ SVG или HTML.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.