在没有viewbox的svg上缩放边框答案

【问题标题】：Scale border on svg without viewbox在没有viewbox的svg上缩放边框
【发布时间】：2021-08-29 22:26:03
【问题描述】：

我有 2 个 svg，一个有视图框，另一个没有。两者都是父级的 100% 宽度。第一个随视图框缩放，第二个随父级的高度缩放，因为我有一个悬停高度过渡。

问题是我希望两者具有相同的笔画宽度。我希望笔画像它与具有视图框的 svg 一样缩放，但第二个矩形的笔画始终保持 2px。

我怎样才能保持使用它的父级缩放矩形高度的功能，而且还要具有与第一个 svg 相同的边框宽度？

body > div{
  width: 100px;
  height: 400px;
}
svg{
  width: 100%;
  stroke-width: 2px;
  stroke: black;
}
.svg-with-viewbox rect{
  fill: red;
}
div > div{
  height: 50px;
  width: 100%;
  transition: 1.5s all;
}
div > div:hover{
  height: 200px;
}
.scale-height{
  fill: yellow;
  height: 100%;
}

<div>
  <svg class="svg-with-viewbox" viewbox="0 0 20 20">
    <rect height="20" width="20"/>
  </svg>
  <div>
    <svg class="scale-height">
        <rect width="100%" height="100%">
          
        </rect>
    </svg>
  </div>
    
</div>

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用 drop-shadow() 过滤器，因此无论 svg 部分是否重新缩放，透明边缘周围的大小都将保持不变。

例子

body>div {
  width: 100px;
  height: 400px;
}

svg {
  width: 100%;
  filter: /* on on each sides */
      drop-shadow( 2px 0   black) 
      drop-shadow(-2px 0   black) 
      drop-shadow( 0   2px black) 
      drop-shadow( 0  -2px black);
  margin: 2px;/* increase margin or padding to include the drop-shadow */
}

.svg-with-viewbox rect {
  fill: red;
}

div>div {
  height: 50px;
  width: 100%;
  transition: 1.5s all;
}

div>div:hover {
  height: 200px;
}

.scale-height {
  fill: yellow;
  height: 100%;
}

<div>
  <svg class="svg-with-viewbox" viewbox="0 0 20 20">
    <rect height="20" width="20"/>
  </svg>
  <div>
    <svg class="scale-height">
        <rect width="100%" height="100%">
          
        </rect>
    </svg>
  </div>

</div>

【讨论】：