svg中的image标签图片平铺处理

svg中嵌入image标签后，修改image标签大小，图片并不会拉伸，image标签中增加preserveAspectRatio="none" vector-effect="non-scaling-stroke"

牟云飞

5004人浏览 · 2022-07-14 16:59:06

牟云飞 · 2022-07-14 16:59:06 发布

svg中嵌入image标签后，修改image标签大小，图片并不会拉伸，

image标签中增加 preserveAspectRatio="none" vector-effect="non-scaling-stroke"

<!DOCTYPE html>
<html>
<body>


<svg version="1.1"
   baseProfile="full"
   width="300" height="200"
   xmlns="http://www.w3.org/2000/svg" 
   xmlns:xlink="http://www.w3.org/1999/xlink">

  <rect width="100%" height="100%" stroke="red" stroke-width="4" fill="yellow" />


  <text x="150" y="115" font-size="16" text-anchor="middle" fill="white">RUNOOB SVG TEST</text>
   <g vector-effect="non-scaling-stroke">
	   <image 
	  preserveAspectRatio="none" vector-effect="non-scaling-stroke" x="0" y="0" width="300" height="180" xlink:href="http://localhost:8188/api/browserImage?img=20220708031939346.jpg"></image>
	</g>
</svg>
 
</body>
</html>

----vector-effect

vector-effect 属性指明绘制对象时要使用的矢量效果，简单一点说就是让线条保持好看，而不是变大变小

用法说明

值	`none` \| `non-scaling-stroke` \| `non-scaling-size` \| `non-rotation` \| `fixed-position`
默认值	`none`
可动画性	是

non-scaling-stroke该值的最终视觉效果是笔触宽度不依赖于元素的变换（包括非均匀缩放和剪切变换）和缩放级别。

-----preserveAspectRatio

有时候，通常我们使用 viewBox 属性时，希望图形拉伸占据整个视口。在其他情况下，为了保持图形的长宽比，必须使用统一的缩放比例。

preserveAspectRatio属性表示是否强制进行统一缩放。

对于支持该属性的所有元素 (如上所示)，除了 <image> 元素之外，preserveAspectRatio 只适用于在同一元素上为 viewBox 提供的值。对于这些元素，如果没有提供属性 viewBox ，则忽略了 preserveAspectRatio。

对于 <image> 元素，preserveAspectRatio 指示引用的图像应该如何与参考矩形进行匹配，以及是否应该相对于当前用户坐标系保留参考图像的长宽比

上下文用法

Categories	None
Value	<align> [<meetOrSlice>]
Animatable	Yes
Normative document	SVG 1.1 (2nd Edition)

<align>

<align> 属性值表示是否强制统一缩放，当 SVG 的 viewbox 属性与视图属性宽高比不一致时使用. <align> 属性的值一定是下列的值之一：

none
不会进行强制统一缩放，如果需要，会缩放指定元素的图形内容，使元素的边界完全匹配视图矩形。
(注意：如果 <align> 的值是 none ，则 <meetOrSlice> 属性的值将会被忽略。)
xMinYMin - 强制统一缩放。
将 SVG 元素的 viewbox 属性的 X 的最小值与视图的 X 的最小值对齐。
将 SVG 元素的 viewbox 属性的 Y 的最小值与视图的 Y 的最小值对齐。
xMidYMin - 强制统一缩放。
将 SVG 元素的 viewbox 属性的 X 的中点值与视图的 X 的中点值对齐。
将 SVG 元素的 viewbox 属性的 Y 的最小值与视图的 Y 的最小值对齐。
xMaxYMin - 强制统一缩放。
将 SVG 元素的 viewbox 属性的 X 的最小值 + 元素的宽度与视图的 X 的最大值对齐。
将 SVG 元素的 viewbox 属性的 Y 的最小值与视图的 Y 的最小值对齐。
xMinYMid - 强制统一缩放。
将 SVG 元素的 viewbox 属性的 X 的最小值与视图的 X 的最小值对齐。
将 SVG 元素的 viewbox 属性的 Y 的中点值与视图的 Y 的中点值对齐。
xMidYMid (默认值) - 强制统一缩放。
将 SVG 元素的 viewbox 属性的 X 的中点值与视图的 X 的中点值对齐。
将 SVG 元素的 viewbox 属性的 Y 的中点值与视图的 Y 的中点值对齐。
xMaxYMid - 强制统一缩放。
将 SVG 元素的 viewbox 属性的 X 的最小值 + 元素的宽度与视图的 X 的最大值对齐。
将 SVG 元素的 viewbox 属性的 Y 的中点值与视图的 Y 的中点值对齐。
xMinYMax - 强制统一缩放。
将 SVG 元素的 viewbox 属性的 X 的最小值与视图的 X 的最小值对齐。
将 SVG 元素的 viewbox 属性的 Y 的最小值 + 元素的高度与视图的 Y 的最大值对齐。
xMidYMax - 强制统一缩放。
将 SVG 元素的 viewbox 属性的 X 的中点值与视图的 X 的中点值对齐。
将 SVG 元素的 viewbox 属性的 Y 的最小值 + 元素的高度与视图的 Y 的最大值对齐。
xMaxYMax - 强制统一缩放。
将 SVG 元素的 viewbox 属性的 X 的最小值 + 元素的宽度与视图的 X 的最大值对齐。
将 SVG 元素的 viewbox 属性的 Y 的最小值 + 元素的高度与视图的 Y 的最大值对齐。

<meetOrSlice> 是可选的，如果提供的话，与 <align> 间隔一个或多个的空格，参数所选值必须是以下值之一：

meet (默认值) - 图形将缩放到：
- 宽高比将会被保留
- 整个 SVG 的 viewbox 在视图范围内是可见的
- 尽可能的放大 SVG 的 viewbox，同时仍然满足其他的条件。
在这种情况下，如果图形的宽高比和视图窗口不匹配，则某些视图将会超出 viewbox 范围（即 SVG 的 viewbox 视图将会比可视窗口小）。
slice - 图形将缩放到：
- 宽高比将会被保留
- 整个视图窗口将覆盖 viewbox
- SVG 的 viewbox 属性将会被尽可能的缩小，但是仍然符合其他标准。
在这种情况下，如果 SVG 的 viewbox 宽高比与可视区域不匹配，则 viewbox 的某些区域将会延伸到视图窗口外部（即 SVG 的 viewbox 将会比可视窗口大）。