svg文字砍断错位布局效果-html代码-BFW代码库

svg文字砍断错位布局效果

代码语言：html

代码描述：svg文字砍断错位布局效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html,body{
	margin: 0px;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #6a6;
}
svg{
	width: 100%;
	height: 100%;
}
</style>

</head>
<body translate="no">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="500" viewBox="0 0 1000 500">
<defs>
<mask id="text">
<text text-anchor="middle" font-size="120" font-weight="bold" font-family="sans-serif" fill="white">SLASHED</text>
</mask>
<mask id="cut1">
<g fill="white">
<g mask="url(#text)" transform="rotate(85) translate(0,5) rotate(-85)">
<rect width="500" height="1000" y="-500" transform="translate(0,-30) rotate(85)"></rect>
</g>
<g mask="url(#text)" transform="rotate(85) translate(0,-5) rotate(-85)">
<rect width="500" height="1000" x="-500" y="-500" transform="translate(0,-30) rotate(85)"></rect>
</g>
</g>
</mask>
<mask id="cut2">
<g fill="white">
<g mask="url(#cut1)" transform="rotate(-70) translate(0,5) rotate(70)">
<rect width="500" height="1000" y="-500" transform="translate(-80,-10) rotate(-70)"></rect>
</g>
<g mask="url(#cut1)" transform="r.........完整代码请登录后点击上方下载按钮下载查看