css 缩放SVG以适合div

laawzig2  于 2022-11-19  发布在  其他
关注(0)|答案(2)|浏览(300)

我已经在这里经历了许多线程,但无法得到任何建议的解决方案,为我的用例工作。
我有一个在外部网站上生成的SVG。它由三个元素组成。我想嵌入这个SVG,使它居中,并适合div的宽度的80%,同时保持纵横比。
我创建了一个logo类,我尝试将其应用于SVG和div,但它没有调整SVG的大小。我可能遗漏了一些简单的东西,因为这是我第一次嵌入SVG。任何提示都将受到感谢。
于飞:

<div class="logo">
<svg viewBox="0 0 100 100" height="125.10821574604812" width="386" style="width: 386px; height: 125.108px; display: inline-block;">
  <g id="SvgjsG1007" featurekey="symbolFeature-0" transform="matrix(0.24606297734400367,0,0,0.24606297734400367,-0.99212501603224,-0.46136984249956975)" fill="black">
    <path xmlns="http://www.w3.org/2000/svg" d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"></path></g>
    <g id="SvgjsG1008" featurekey="textGroupContainer" transform="matrix(1,0,0,1,385,15)" fill="black">
      <rect xmlns="http://www.w3.org/2000/svg" y="0" height="1" width="1" opacity="0"></rect><rect xmlns="http://www.w3.org/2000/svg" y="0" x="-265" width="3" height="96"></rect></g>
      <g id="SvgjsG1009" featurekey="vMvB0T-0" transform="matrix(2.9018419606484582,0,0,2.9018419606484582,135.09815803935155,27.97299999605343)" fill="black">
        <path d="M1 20 l0 -8.4 c0 -5.58 0 -7.78 3 -7.78 s3 2.2 3 7.78 l0 8.4 l-2 0 l0 -4.6 l-2 0 l0 4.6 l-2 0 z"></path></g>
        </svg>
  </div>

CSS:

.logo {
  width: 80% !important;
  align-content: center;
}

Snippet -无论div中设置的大小如何,SVG都不会调整大小:
第一次

dzjeubhm

dzjeubhm1#

第一个

  • 您需要从<svg>中移除内联style,因为它会覆盖您在CSS中设置的值
  • 设置<svg viewbox=“0 0 386 126”〉',因为它似乎是路径的宽度/高度

然后

  • 或者设置<svg width="100%" height="100%">
  • 或者也从<svg>中删除这些值并在CSS规则中设置它们。

第一个

ppcbkaq5

ppcbkaq52#

如果使用顺风,则添加scale-100
scale-100 = transform: scale(1);
喜欢

<figure>
  <img className="scale-100 w-16 h-16" src={/img.svg} alt='SVG Image'/>
</figure>

CSS等效项为

.svg_img {
  transform: scale(1);
  width: 10rem;
  height: 10rem;
}

相关问题