Question

我在svg图标周围设置了冰柱样式，但该图标在顶部被切除了。

.transport-circle {
  border: 3px solid #30574b;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  text-align: center;
  line-height: 150px;
  vertical-align: middle;
  padding: 10px;
  fill: #30574b;
}

<img class="transport-circle style-svg" src="https://wordpress-175698-743047.cloudwaysapps.com/wp-content/uploads/2019/07/train.svg" alt="Train" width="100" height="100" />

有什么想法可以让火车图标完全可见吗？

Answer 1

将图标作为背景可以避免此问题：

.transport-circle {
  border: 3px solid #30574b;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  padding: 10px;
  background-size:cover;
  background-position:center;
  background-origin:content-box;
  background-repeat:no-repeat;
}

<div class="transport-circle style-svg" style="background-image:url(https://wordpress-175698-743047.cloudwaysapps.com/wp-content/uploads/2019/07/train.svg)" alt="Train" ></div>

Answer 2

除非您在实际的svg图像周围留有更多空白，否则我认为将边框半径应用于图像时无法避免图像被剪切掉。

或者，您可以将圆形样式添加到包装div中。

.transport-circle {
  border: 3px solid #30574b;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  text-align: center;
  line-height: 150px;
  vertical-align: middle;
  padding: 10px;
  fill: #30574b;
}
.transport-circle img {
  width:100%;
  height:auto;
}

<div class="transport-circle style-svg">
<img src="https://wordpress-175698-743047.cloudwaysapps.com/wp-content/uploads/2019/07/train.svg" alt="Train" width="100" height="100" />
</div>

圆圈中的图像不完全可见

2 个答案: