Совершенно верно сказано в комментариях @Геннадий Журов
добавьте значения width и height в соответствующие атрибуты
Значения можно указывать в процентах или пикселях
Исправления кода в вопросе
- В svg нет
Z-index
поэтому нужно следить, чтобы порядок размещения
объектов не допускал перекрывания. Поэтому сначала <image>
, затем
<rect>
, потом <text>
В шапке svg файла нужно исправить namespaces
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
- Если вы выбрали svg, то за мучения должна быть награда -
адаптивность. Для этого добавляете
viewBox="0 0 1247 845"
по
размерам используемой картинки и убираете width
и height
из шапки
svg файла
Оборачиваете svg код в контейнер <div class="container">
и с
помощью процентов регулируете начальный размер svg/
Старайтесь не допускать не завершенных, заготовок кода, как у вас <rect></rect>
svg парсер проглотит это, не выдаст ошибки, но
выполнение программы будет остановлено и теги, которые ниже не будут
выполнены
.container {
width:75%;
height:75%;
}
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink = "http://www.w3.org/2000/xlink" width="100%" height="100%" viewBox="0 0 1247 845">
<image xlink:href="https://i.stack.imgur.com/bPFHK.png"
width="100%" height="100%"> </image>
<rect x="20" y="60" width="520" height="100" rx="15" ry="15"
style="stroke:#ED6E46; stroke-width:4; fill: none;"/>
<text x="35" y="145" fill="#ED6E46" font-size="100px" font-family="'Leckerli One', cursive">Some text</text>
</svg>
</div>
Анимация рамки и текста
В качестве развивающего бонуса сделаем анимацию рамки и текста.
Чтобы они двигались вместе объединим их в группу <g>.. </g>
.container {
width:100%;
height:100%;
}
#rect1 {
stroke:#ED6E46;
stroke-width:4;
fill:none;
}
#txt1 {
fill:#ED6E46;
font-size:100px;
font-family:'Leckerli One', cursive;
}
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink = "http://www.w3.org/2000/xlink" width="100%" height="100%" viewBox="0 0 1247 845">
<image id="img1" width="100%" height="100%" xlink:href="https://i.stack.imgur.com/bPFHK.png"> </image>
<g id="gr1">
<rect id="rect1" x="20" y="60" width="520" height="100" rx="15" ry="15"> </rect>
<text id="txt1" x="35" y="145">Some text</text>
<animateTransform
attributeName="transform"
type="translate"
values="20 65;20 65;700 20;700 20;700 500;700 500;20 65" dur="6s"
repeatCount="indefinite"
/>
</g>
</svg>
</div>
Объекты перемещаются по траектории между узловыми точками с координатами - "x1 y1;x2 y2; x3 y3"
, которые указаны в параметре:
values="20 65;20 65;700 20;700 20;700 500;700 500;20 65"
Паузы в перемещениях между узловыми точками достигаются повторением координат, той точки, где необходима пауза. 20;700 20;700
и 700 500;700 500
width
иheight
в соответствующие атрибуты<image />
– zhurof 22 дек '18 в 9:48