html - SVG 图像作为图案 - 全宽 - 保持比例
问题描述
我想创建这种类型的分隔符:
但我不能让它工作,图像永远不会完全拉伸或变形或者是一个图案......
SVG 形状:
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 1024 1379.4" style="enable-background:new 0 0 1024 1379.4;" xml:space="preserve">
<polygon points="0,1 0,341 0,1037.4 0,1377.4 1024,1037.4 1024,341 "/>
</svg>
SVG 模式(试用):
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1379.4" version="1.1" width="100%" height="200" preserveAspectRatio="none">
<defs>
<pattern id="img4" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://images.unsplash.com/photo-1507181179506-598491b53db4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=299b6fae13eb39086f5bb28029c61760&auto=format&fit=crop&w=1778&q=80" x="0" y="0" width="100" height="100" />
</pattern>
</defs>
<polygon points="0,1 0,341 0,1037.4 0,1377.4 1024,1037.4 1024,341" fill="url(#img4)"/>
</svg>
https://jsfiddle.net/Bucky208/b3jhsem4/
这是使用剪辑路径(edge 和 IE 不支持?!),它也可以在完整的 witdh 上延伸:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 1024 1381.5" width="100%" height="800" style="enable-background:new 0 0 1024 1381.5;" xml:space="preserve" preserveAspectRatio="none">
<style type="text/css">
.st0{clip-path:url(#SVGID_2_);}
</style>
<g>
<defs>
<polygon id="SVGID_1_" points="0,572.1 0,1381.3 1024,1040.5 1024,337.6 0,0 "/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g class="st0">
<defs>
<rect id="SVGID_3_" x="-3.1" y="0" width="1030" height="1381.3"/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#SVGID_4_);">
<image style="overflow:visible;" width="331" height="444" xlink:href="https://images.unsplash.com/photo-1507160634214-89e0baae2457?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9df168bddae101e185e697926806634f&auto=format&fit=crop&w=934&q=80" transform="matrix(3.1119 0 0 3.1111 -3.0528 -2.604167e-04)">
</image>
</g>
</g>
</g>
</svg>
https://jsfiddle.net/Bucky208/3xvh8kn1/1/
目标:
- 100% 宽度
- 图像不变形
- 形状本身的宽度 可能会变形(固定高度)
亲切的问候
解决方案
基本上,您所要做的就是preserveAspectRatio
在您的图像上设置适当的。在这种情况下,使用关键字slice
. SVGslice
相当于HTMLcover
中background-size
CSS 属性的值。
在下面的示例中,我执行以下操作:
- 使用默认值保留模式
patternUnits="objectBoundingBox"
并设置width
和height
,"1"
以便我们的模式覆盖整个对象。 - 设置
patternContentUnits="objectBoundingBox"
和设置图像width
,height
使"1"
图像覆盖整个形状。 - 将图像设置为我们
preserveAspectRatio="xMidYMid slice"
,使图像按比例放大以覆盖整个对象边界框。
此外,我将图像更改为更容易判断它保持其纵横比的图像。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1379.4" version="1.1" width="100%" height="200">
<defs>
<pattern id="img4" patternContentUnits="objectBoundingBox" width="1" height="1">
<image x="0" y="0" width="1" height="1" preserveAspectRatio="xMidYMid slice"
xlink:href="https://images.unsplash.com/photo-1520658402001-b5960f9a6059?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5670796b33630d3eff4b287840632a59&auto=format&fit=crop&w=1950&q=80"/>
</pattern>
</defs>
<polygon points="0,1 0,341 0,1037.4 0,1377.4 1024,1037.4 1024,341" fill="url(#img4)"/>
</svg>
推荐阅读
- javascript - 在哪里放置方法,在父组件或子组件中?
- java - 为什么编译代码时gradlew返回找不到符号错误?
- java - 为什么 JAXB 无法解析泛型类型?
- list - 使用 Scheme 递归添加到列表
- php - 覆盖 Ajax 命令以在 Wordpress 上使用
- node.js - Mongoose Boolean false vs undefined?
- javascript - JavaScript appendChild 替换旧的 Child
- turing-machines - 构建 TM 的状态图
- javascript - main.js 中不可用的环境变量
- sql - 按时间间隔对结果集的子集进行分组