如何将不同尺寸的 SVG 设置为相同的高度？

Posted 2023-03-06

【中文标题】如何将不同尺寸的 SVG 设置为相同的高度？

【英文标题】：How do I set different size SVGs same height?

【发布时间】：2021-08-05 20:45:05

【问题描述】：

我使用 RestAPI，它给了我不同大小的 SVG。有些图像适合，但有些图像不适合。 示例：如果您查看边框和图像，您就会明白。

主要问题是；我不知道所有图片尺寸，我该如何设置这种情况？ （如果给定 100% 的高度，则更改卡片高度，我不想要这个。）

<div className="countries__card card">
                <div className="card__flag">
                  <LazyLoad
                    height=windowWidth >= 614 ? "210px" : '173px"'
                    once
                  >
                    <img
                      width=windowWidth >= 614 ? "320px" : "100%"
                      height=windowWidth >= 614 ? "210px" : '100%"'
                      src="https://restcountries.eu/data/afg.svg"
                      
                    />
                  </LazyLoad>
                </div>
                <div className="card__body">
                  <div className="card__body-name">
                    <h5>Lorem</h5>
                  </div>
                  <div className="card__body-infos">
                    <span className="country-capital">Capital: Lorem</span>
                    <span className="country-currencies">Currency: Lorem</span>
                    <span className="country-region">Region: Lorem</span>
                  </div>
                </div>
                <footer className="card__footer">
                  <a href="#!">Go to detailed information.</a>
                </footer>
              </div>
              <div className="countries__card card">
                <div className="card__flag">
                  <LazyLoad
                    height=windowWidth >= 614 ? "210px" : '173px"'
                    once
                  >
                    <img
                      width=windowWidth >= 614 ? "320px" : "100%"
                      height=windowWidth >= 614 ? "210px" : '100%"'
                      src="https://restcountries.eu/data/blr.svg"
                      
                    />
                  </LazyLoad>
                </div>
                <div className="card__body">
                  <div className="card__body-name">
                    <h5>Lorem</h5>
                  </div>
                  <div className="card__body-infos">
                    <span className="country-capital">Capital: Lorem</span>
                    <span className="country-currencies">Currency: Lorem</span>
                    <span className="country-region">Region: Lorem</span>
                  </div>
                </div>
                <footer className="card__footer">
                  <a href="#!">Go to detailed information.</a>
                </footer>
              </div>

.card 
    border: 2px solid black;
    text-align: center;
    margin-bottom: rem(50px);
    width: 320px;
    overflow: hidden;
    animation: showCard 0.7s ease-out forwards;

    img 
        vertical-align: middle;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    

    &__body,
    &__footer 
        background: $skyblue;
    

    &__body 
        &-name 
            color: $text-navy;
            padding: rem(10px) 0;
            font-size: rem(20px);
            font-weight: $font-bold;
            font-weight: normal;
            border-bottom: 4px solid $text-navy;
        

        &-infos 
            padding: rem(15px) 0;
            display: flex;
            justify-content: center;
            color: $text-navy;


            span 
                white-space: nowrap;
                font-size: rem(14.3px);
            

            span:not(:last-child) 
                padding-right: rem(5px);
                border-right: 3px solid $text-navy;
            

            span:not(:first-child) 
                padding-left: rem(5px);
            
        
    

    &__footer 
        border-top: 3px solid $text-navy;
        padding: rem(15px) 0;
        background: $text-navy;
        cursor: pointer;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;

【问题讨论】：

你能分享一些代码吗？

@YashMaheshwari 我编辑了。

标志有不同的形状。如果你把中间的高一点，它要么必须更宽，要么被压扁。你需要指定你想要发生的事情。听起来你想要壁球（？）

【参考方案1】：

标志尺寸没有标准。 RestCountries 在其 true 维度中提供标志。

我创建了一个 29 kB 单个文件 Web 组件，它执行 所有 固定尺寸​​ 的 SVG 标志（就像大多数 SVG 标志 Repos 一样）。 并且可以使用 RestCountries（或任何其他 SVG 标志 Repo）作为替代来源：

https://flagmeister.github.io/

唉，我没有创建所有波峰，你选择了我未能完成的那两个：阿富汗和安道尔作为你的截图。除非 detail 设置阻止，否则这些标志 FlagMeister 将默认为 RestCountries。

 <script src="https://flagmeister.github.io/elements.flagmeister.min.js"></script>
 <style>
  div 
    display:grid;
    grid-template-columns:repeat(6,100px);
    gap:10px;
  
  [nodetail] 
    --flagmeisterdetail:99999;
  
 </style>
  <h3>RestCountries & FlagMeister (forced to no-detail)</h3> 
 <div>
  <flag-af></flag-af>
  <flag-af nodetail></flag-af>
  <flag-by></flag-by>
  <flag-by nodetail></flag-by>
  <flag-ad></flag-ad>
  <flag-ad nodetail></flag-ad>
 </div>

【讨论】：

谢谢，丹尼，但在这种情况下，我会遇到问题。如何确定动态组件名称？

【参考方案2】：

如果您可以忍受制作所有标志的本地副本。然后，如果您将以下属性添加到所有 SVG，它们将拉伸以适合您的 <img> width 和 height。

preserveAspectRatio="none"

例如，白俄罗斯国旗变成：

svg 
  width: 300px;
  height: 300px;

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 1098 549" preserveAspectRatio="none">
<title>Flag of Belarus</title>
<rect fill="#C8313E"  />
<rect y="366" fill="#4AA657"  />
<rect fill="#FFF"  />
<g id="h">
<g id="q" fill="#C8313E" fill-rule="evenodd" transform="scale(5.304347826,9)">
<path d="M4,0h3v1h1v1h1v1h1v1h1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h1v-1h1v-1h1v-1h1zM5,2h1v1h1v1h1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h1v-1h1zM5,4h1v1h-1zM0,1h1v1h-1zM0,7h1v1h-1zM11,0h0.6v2h-.6zM11,7h.6v2h-.6zM2,9h1v1h1v1h1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h1v-1h1zM2,11h1v1h-1zM8,9h1v1h1v1h1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h1v-1h1zM8,11h1v1h-1zM0,15h1v1h-1zM11,14h.6v2h-.6z"/>
<path d="M0,18h1v-1h1v-1h1v-1h1v-1h1v-1h1v1h1v1h1v1h1v1h1v1h1v1h.6v4h-.6v1h-1v1h-1v1h-1v1h-1v1h-1v2.6h-2v-0.6h-1v-1h-1v-1h-1v-1h-1 v-3h1v1h1v1h1v1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h-1v-1h-1v-1h-3v1h2v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h-1zM0,22h1v1h-1zM11,25h.6v1h-.6zM9,27h1v1h1v1h.6v1.6h-.6v-.6h-1v-1h-1zM7,30h1v.6h-1z"/>
</g>
<use xlink:href="#q" transform="translate(122,0) scale(-1,1)"/>
</g>
<use xlink:href="#h" transform="translate(0,549) scale(1,-1)"/>
</svg>