1

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

Первый SVG выглядит так:

<svg width="260" height="260" viewBox="0 0 147.9 65" xmlns="http://www.w3.org/2000/svg"><g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="none" style="stroke:#000;stroke-width:0.25mm;fill:none"><path d="M 147.9 0 L 147.9 5.1 L 139.2 5.1 L 139.2 59.9 L 147.7 59.9 L 147.7 65 L 125.4 65 L 125.4 59.9 L 133.5 59.9 L 133.5 14.1 L 133.1 14.1 L 110 62.2 L 106.5 62.2 L 83.2 14 L 82.8 14 L 82.8 59.9 L 91 59.9 L 91 65 L 68.8 65 L 68.8 59.9 L 77.3 59.9 L 77.3 5.1 L 68.6 5.1 L 68.6 0 L 82.4 0 L 108.3 53.7 L 108.7 53.7 L 134.1 0 L 147.9 0 Z M 64.7 0 L 64.7 5.1 L 58.6 5.1 L 35 65 L 30.1 65 L 6.4 5.1 L 0 5.1 L 0 0 L 22.5 0 L 22.5 5.1 L 12.6 5.1 L 32.6 56.8 L 33.1 56.8 L 52.7 5.1 L 42.6 5.1 L 42.6 0 L 64.7 0 Z" vector-effect="non-scaling-stroke"/></g></svg>

Второй выглядит так:

<svg width="260" height="260" viewBox="0 0 16 16" fill="rgb(255, 115, 0)" xmlns="http://www.w3.org/2000/svg">

Второй должен служить фоном первому, но почему-то, если их объединить под получается вот так:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 147.9 65" style="enable-background:new 0 0 147.9 65;" xml:space="preserve">

Живое превью можно увидеть, если вставить код здесь.

Я мало понимаю в векторных изображениях, просто хочу использовать итоговую картинку как favicon для сайта. Должно получиться что-то такое:

введите сюда описание изображения

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

Как можно объединить два SVG, чтобы получилось как на картинке выше, не используя HTML, CSS, JS и т.д. - используя только SVG?

3
  • просто два circle по одним и тем же координатам - в одном fill в другом stroke 3 мая 2020 в 13:09
  • и по центру текст без fill но есть stroke 3 мая 2020 в 13:10
  • @MaximLensky, верно, но я не понимаю, как это сделать. 3 мая 2020 в 16:29

1 ответ 1

1

Если что то не понятно - спросите - я отвечу

<svg viewBox="-250 -250 500 500" xmlns="http://www.w3.org/2000/svg" width="200">
  <defs>
    <style>
      text{
        text-transform: uppercase;
        font-size: 150px;
        fill: none;
        stroke: #000;
        stroke-width: 2;
      }
    </style>
  </defs>
  <circle r="200" fill="#ff7300"/>
  <circle r="190" fill="none" stroke="#b2c2df" stroke-width="20"/>
  <text x="-100" y="60">vm</text>
</svg>

1
  • Вместо рисования текста просто текст. Спасибо огромное! 3 мая 2020 в 18:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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