搜索文档
首页
HTML/CSS
JavaScript
服务端开发
Java教程
移动端
数据库
当前位置:
首页
HTML/CSS
SVG 教程
SVG 教程
源代码
清空
点击运行
<svg width="500" height="120"> <defs> <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%" spreadMethod="pad"> <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/> <stop offset="100%" stop-color="#000000" stop-opacity="1"/> </linearGradient> <pattern id="pattern2" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse" > <circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff; " /> </pattern> <mask id="mask6" x="0" y="0" width="200" height="100" > <rect x="0" y="0" width="200" height="100" style="stroke:none; fill: url(#gradient2)"/> </mask> </defs> <text x="10" y="55" style="stroke: none; fill: #000000;"> This text is under the rectangle </text> <rect x="1" y="1" width="200" height="100" style="stroke: none; fill: url(#pattern2); mask: url(#mask6)"/> </svg>
运行结果
