SVG图形翻转与上下留白设置问题求助

嘿，别担心，新手刚接触SVG遇到这类布局问题太正常啦！我来帮你搞定这两个需求——翻转图形，还有让SVG和上方区域之间留出空白~

先给你梳理下现有代码里的小问题：你的path里有个1900,0的坐标，远远超出了viewBox="0 0 500 500"的范围，这会导致图形显示异常，我先帮你修正这个，再解决你的核心问题。

1. 实现SVG翻转 #

要翻转SVG图形，最便捷的方式是给<svg>标签添加transform属性，或者用CSS的transform。比如要垂直翻转（上下翻转），可以这样做：

<div class="container2"> 
  <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet" style="transform: scaleY(-1); transform-origin: center;"> 
    <!-- 修正path的1900为500，避免超出viewBox -->
    <path d="M0,100 C490,200 350,0 500,0 L500,0 L0,0 Z" style="stroke: none; fill:#21252917;"></path> 
  </svg> 
</div>

这里transform: scaleY(-1)是垂直翻转，transform-origin: center确保翻转是以图形中心为基准，避免位置偏移。如果是水平翻转，就用scaleX(-1)。

2. 给SVG顶部添加空白区域 #

要让SVG和上方区域不贴合，有几种简单方法：

方法一：调整viewBox的偏移量 #

把viewBox的y值从0改成一个正数，比如viewBox="0 50 500 500"，这样整个SVG的可视区域会向下偏移50单位，顶部就会留出空白：

<svg viewBox="0 50 500 500" preserveAspectRatio="xMinYMin meet" style="transform: scaleY(-1); transform-origin: center;">

方法二：给SVG容器添加padding-top #

给.container2加padding-top，直接在容器顶部留出空白：

.container2 { 
  display: inline-block; 
  position: relative; 
  width: 100%; 
  vertical-align: middle; 
  overflow: hidden; 
  padding-top: 20px; /* 顶部留出20px空白 */
}

方法三：调整path的位置 #

直接修改path的坐标，把整个路径向下移动，比如把所有y坐标都加上50：

<path d="M0,150 C490,250 350,50 500,50 L500,50 L0,50 Z" style="stroke: none; fill:#21252917;"></path>

整合后的完整代码 #

这里把翻转和顶部空白结合起来，用viewBox偏移的方式，给你一个完整的示例：

<div class="container2"> 
  <svg viewBox="0 50 500 500" preserveAspectRatio="xMinYMin meet" style="transform: scaleY(-1); transform-origin: center;"> 
    <path d="M0,100 C490,200 350,0 500,0 L500,0 L0,0 Z" style="stroke: none; fill:#21252917;"></path> 
  </svg> 
</div>

<style>
.container2 { 
  display: inline-block; 
  position: relative; 
  width: 100%; 
  vertical-align: middle; 
  overflow: hidden; 
}
</style>

这样你就能得到一个翻转后的SVG，而且顶部和上方区域之间有空白啦！如果还有其他细节需要调整，随时告诉我~

内容的提问来源于stack exchange，提问作者Daniel Anovi