html - 用图案填充 SVG 路径而不拉伸
问题描述
我正在尝试使用编辑此示例并用图案填充波浪
<svg id="shape-overlays" class="shape-overlays" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<pattern id="img4" patternUnits="userSpaceOnUse" width="180" height="180">
<image xlink:href="./pattern/menu-3.png" x="0" y="0" width="180" height="180" />
</pattern>
</defs>
<path class="shape-overlays__path"></path>
<path class="shape-overlays__path"></path>
<path class="shape-overlays__path"></path>
<path class="shape-overlays__path"></path>
</svg>
CSS
.shape-overlays__path:nth-of-type(4) {
fill: url(#img4);
stroke: red;
stroke-width: 1;
}
SVG 路径填充有图案图像,但不重复并且也被拉伸
我想让它作为一个图案重复,如果不可能的话我想用一个大图像作为封面但保持比例
解决方案
为了解决这个问题,我将preserveAspectRatio更改为“xMidYMid slice”而不是“none”
<svg id="shape-overlays" class="shape-overlays" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" >
推荐阅读
- cassandra - 当您不能依赖主键或 uuid 时,Cassandra 插入/更新不重复
- python - 删除管道之前的所有字符,并在 python 中使用正则表达式删除管道
- java - AWS S3 - Java SDK - 检索一批密钥的标签
- python - 如何使用 Python 从产品目录页面中抓取产品?
- c++ - 作为类成员的灵活数组
- apache - LetsEncrypt 与 Apache2 重定向
- python-3.x - Tkinter 刷新/更新我的框架功能?
- typescript - 如何从定义为第一类属性的类中访问类的属性?
- r - Shiny:自定义 NearPoints 的输出
- c++ - 将 20 个字节偏移量添加到指针地址