css 缩放SVG以适合div

laawzig2 于 2022-11-19 发布在其他

关注(0)|答案(2)|浏览(299)

我已经在这里经历了许多线程，但无法得到任何建议的解决方案，为我的用例工作。
我有一个在外部网站上生成的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都不会调整大小：
第一次

css

来源：https://stackoverflow.com/questions/63038178/scale-svg-to-fit-inside-a-div

2条答案

按热度按时间

dzjeubhm1#

第一个

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

然后

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

第一个

赞(0）回复(0）举报 2022-11-19

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;
}

赞(0）回复(0）举报 2022-11-19

我来回答

css 缩放SVG以适合div

2条答案

相关问题

热门标签

最新问答