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"。问题How to align an object in SVG document?

中描述了此过程

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>

svg调整大小不适用于chrome

1 个答案: