svg resize не работает на chrome

Question

У меня есть элемент 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>

Answer 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>