Svg resize не работает на Chrome

У меня есть элемент svg, который я хочу быть вверху справа, и на всю высоту до тех пор, пока ширина не позволит, а затем я хочу, чтобы он был на всю ширину. Я написал это, и он работает на firefox и edge, но не на chrome.

header{
    position: relative;
    height: 100%;
}
#logoSvg{
    max-height: 100vh;
    width: auto;
    position: absolute;
    top:0;
    right:0;
}

    <header>    
    <svg id = "logoSvg" version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" x = "0px" y = "0px"
                	 viewBox = "0 0 762.3 762.6" style = "enable-background:new 0 0 762.3 762.6;" xml:space = "preserve">
            
        <path d = "M0-0.6v0.9l762.3,762.3V-0.6H0z M572.8,375.9c-57.6,6.8-120.5,7.5-189.8,7.5V0c68.9,0,132.2,0.8,189.8,7.5c110.7,13.2,189.1,67.8,189.1,183.8C761.9,308.1,683.6,362.7,572.8,375.9z"/>
    </svg>
</header>

css google-chrome

29.05.2018 22:05

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

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

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

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

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

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

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

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

641

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

Ответы 1

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

Чтобы выровнять дочерние элементы SVG по правому верхнему краю, вам нужно использовать preserveAspectRatio = "xMinYMax meet". Этот процесс описан в вопросе Как выровнять объект в документе SVG?

header{
    position: relative;
    height: 100%;
}
#logoSvg{
    max-height: 100vh;
    width: auto;
    position: absolute;
    top:0;
    right:0;
}

    <header>    
    <svg id = "logoSvg" version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" x = "0px" y = "0px"
                	 viewBox = "0 0 762.3 762.6" style = "enable-background:new 0 0 762.3 762.6;" xml:space = "preserve" preserveAspectRatio = "xMaxYMin meet">
            
        <path d = "M0-0.6v0.9l762.3,762.3V-0.6H0z M572.8,375.9c-57.6,6.8-120.5,7.5-189.8,7.5V0c68.9,0,132.2,0.8,189.8,7.5c110.7,13.2,189.1,67.8,189.1,183.8C761.9,308.1,683.6,362.7,572.8,375.9z"/>
    </svg>
</header>

29.05.2018 22:37

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

Ошибка класса защищенного интерфейса API WebUSB

Невозможно перейти по URL-адресу в браузере Chrome с помощью теста codedui

Фоновое видео не работает при наведении курсора в Chrome

Запретить показывать подсказку в упрощенном представлении или работать с упрощенным представлением в Chrome

Звук уведомления в неактивной вкладке Chrome

Java.lang.NoSuchMethodError: com.google.gson.GsonBuilder.setLenient () Lcom / google / gson / GsonBuilder; при запуске Chrome через ChromeDriver

Загрузить URL-адрес расширения Chrome в другое расширение Chrome

Шрифт инспектора элементов Chrome

Несовместимая с браузером неожиданная строка "undefined" при использовании уничтожения объекта

Необходимо извлекать локальное хранилище веб-сайта каждую секунду

Svg resize не работает на Chrome

Ответы 1

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

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