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

Ваш ответ

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

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