Html svg разрезает изображение пополам

У меня есть значок внутри моего SVG, но он обрезается вверху, как я могу полностью отобразить его внутри SVG?

<svg width = "400" height = "50" data-value = "40">
            <path class = "bg" stroke = "#ccc" d = "M0 10, 400 10" ></path>
            <path class = "meter" stroke = "#0301fb" d = "M0 10, 400 10"
                style = "stroke-dasharray: 400; stroke-dashoffset: 400;">

            </path>
            <image xlink:href = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Circle-icons-hourglass.svg/512px-Circle-icons-hourglass.svg.png" height = "64" width = "50" x = "1%" y = "-20" />
        </svg>
        Original
        <img id = "loadIcon" src = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Circle-icons-hourglass.svg/512px-Circle-icons-hourglass.svg.png" height = "64" width = "50" x = "1%" y = "-20" />

Какой смысл помещать png в svg?

— 19.03.2022 19:53

html css

19.03.2022 19:44

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете установить атрибут viewbox для элементов svg.

<svg width = "400" height = "50" viewbox = "150 -15 100 60" data-value = "40">
            <path class = "bg" stroke = "#ccc" d = "M0 10, 400 10" ></path>
            <path class = "meter" stroke = "#0301fb" d = "M0 10, 400 10"
                style = "stroke-dasharray: 400; stroke-dashoffset: 400;">

            </path>
            <image xlink:href = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Circle-icons-hourglass.svg/512px-Circle-icons-hourglass.svg.png" height = "64" width = "50" x = "1%" y = "-20" />
        </svg>
        Original
        <img id = "loadIcon" src = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Circle-icons-hourglass.svg/512px-Circle-icons-hourglass.svg.png" height = "64" width = "50" x = "1%" y = "-20" />

19.03.2022 19:48

Другие вопросы по теме

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

Создание div для каждого данных

Bootstrap 5 Индикатор слайдов карусели не работает

Попытка скрыть псевдоэлемент в фокусе ввода через ~

CSS выбрать элемент строки в сетке

Есть ли способ изменить цвет текста в текстовом поле?

Как отключить кнопку отправки после клика

Как изменить цвет фона модального окна?

Justify-content выравнивает однострочный текст, но не когда текст занимает несколько строк

Как получить соотношение сторон в HTML и CSS?

Html svg разрезает изображение пополам

Ответы 1

Другие вопросы по теме

Похожие вопросы