用 SVG 形状替换剪辑路径形状答案

【问题标题】：Replacing clip-path shape with SVG shape用 SVG 形状替换剪辑路径形状
【发布时间】：2018-10-31 23:42:00
【问题描述】：

我目前有一个多边形，里面有如下所示的文本

.title {
  clip-path: polygon(1% 0, 100% 15%, 96% 90%, 0 75%);
  background-color: blue;
  
  color: #FFF;
  font-size: 1.7em;
  line-height: 50px;
  
  height: 60px;
  width: 250px;
}

&lt;h1 class="title"&gt;&amp;nbsp;&amp;nbsp;WELCOME TO&lt;/h1&gt;

我正在寻找一个对浏览器更友好的版本，所以我一直在研究使用 SVG 图像。我正在努力编写这个代码，正如你在下面看到的，我有 SVG 形状，经过一些测试，我很快意识到它不能很好地适应浏览器的宽度。如果我能一直保持它的大小，我会很高兴。

然后对于文本在研究后我了解了标签内的标签，但即使是我也在努力格式化文本。

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 7 9" version="1">
      <polygon points=".1 0,5 .2,4.4 1.8,0 1.6" style="fill: #253234;" />
      <text x="1" y="1" fill="white" style="font-family:arial; font-size:.4">WELCOME TO</text>
    </svg>

有没有人知道一种更好的方法，可以在主流浏览器和设备上运行？

【问题讨论】：

标签： html css svg polygon

【解决方案1】：

如果我是你，我会尝试仅使用 css 对容器使用旋转来实现相同的效果，以相同的量反转文本旋转，然后使用具有绝对定位的伪元素 (:after) 来实现非矩形形状效果。

运行 sn-p 以获取可以根据需要进行调整的示例。

.container {
  transform:rotate(3deg);
  display:inline-block;
  position:relative;
  top:50px;
  padding:20px 30px 20px 20px;
  background-color:blue;
}
.container:after {
  content:'';
  display:block;
  background:white;
  width:20px;
  height:110%;
  position:absolute;
  top:0;
  right:-10px;
  transform:rotate(10deg);
}
.title {
  color:#fff;
  display:inline-block;
  font-size:18pt;
  text-transform:uppercase;
  font-family:arial;
  transform:rotate(-3deg)
}

&lt;div class="container"&gt;&lt;span class="title"&gt;Welcome to &lt;/span&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

由于您提供的第一个和第二个版本差异很大，我不确定您想要实现什么。我主要选择第一个。

主要技巧在于您使用viewBox 属性（及其伴随的preserveAspectRatio）的方式。将viewBox 视为适合您使用width 和height 定义的区域的矩形。（这里，用 CSS 拼写。）preserveAspectRatio 描述了拟合规则：为适合元素内部的矩形选择尽可能大的尺寸，然后将其向左移动并垂直移动到中间。

<svg> 中的所有内容现在都将保持固定的位置和与该矩形的比例。如果提高元素的高度，文本的大小会变大；如果你降低它的宽度，它最终会缩小，但总是和多边形一起缩小。

我用text-anchor: middle 定位文本，这相当于SVG 的text-align: center。像您一样使用 0.4 的字体大小不是一个好主意；浏览器容易处理低于 1 的值不正确。

最后，如果您使用它来代替 <h1> 标记，您应该用它包围它以保持可访问性，或者设置适当的 ARIA 属性，如图所示：

.title {
  height: 60px;
  width: 100%;
  display: block; /* not needed if surrounded by <h1> */
}

.title polygon {
  fill: blue;
}

.title text {
    font-family: Arial;
    font-size: 24px;
    fill: #FFF;
    text-anchor: middle;
}

<svg class="title" viewBox="0 0 250 60" preserveAspectRatio="xMinYMid meet"
     aria-role="heading" aria-level="1">
    <polygon points="2.5,0 250,9 240,54 0 45" />
    <text x="125" y="36">WELCOME TO</text>
</svg>

【讨论】：