Question

我有一个简单的SVG，我想拉伸以填充其容器而不保留纵横比。无论我做什么，SVG似乎都保留了宽高比，我相信我已经在SVG文件中关闭了。它只是永远不想伸展到容器的整个宽度。这究竟出了什么问题？谢谢！

SVG：

<?xml version="1.0" encoding="utf-8"?>

<svg 
version="1.1" 
xmlns="http://www.w3.org/2000/svg" 
width="100%" 
height="100%"
preserveAspectRatio="none" >

<polygon points="480.4,200 0,200 0,0 480.4,0 599.9,100 " fill="#E1E1E1"/>
</svg>

CSS：

.issue-name {
    background-image:url(../img/IS-arrow.svg);
    padding-left:1rem !important;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

HTML：

 <div class="large-11 small-10 columns text-center issue-name">
      <h5 class="vertical-center">PLC Adjustments for Young Producers</h5>
 </div>

结果：

Imgur link

Answer 1

如果你的SVG没有preserveAspectRatio，

viewBox什么都不做。

viewBox告诉渲染器你的SVG内容有多大，所以它知道要缩放多少。

SVG - preserveAspectRatio =＆＃34; none＆＃34;不申请

1 个答案: