1、蒙版
蒙版
<template>
<div class="container">
<svg width="400" height="400">
<defs>
<mask id="test-mask">
<rect x="5" y="5" width="390" height="390" fill="purple"></rect>
<circle r="50" cx="150" cy="150" />
</mask>
</defs>
<rect x="5" y="5" width="390" height="390" fill="red"></rect>
<rect x="5" y="5" width="390" height="390" fill="blue" mask="url(#test-mask)"></rect>
</svg>
</div>
</template>
<script setup>
import { defineProps,computed } from 'vue'
const props = defineProps({
})
</script>
<style scoped>
</style>
2、线性渐变
渐变色
<template>
<div class="container">
<svg width="400" height="400">
<defs>
<mask id="test-mask">
<rect x="5" y="5" width="390" height="390" fill="purple"></rect>
<circle r="50" cx="150" cy="150" />
</mask>
<linearGradient id="test-linear-gradient">
<stop offset="0%" stop-color="red"></stop>
<stop offset="100%" stop-color="blue"></stop>
</linearGradient>
</defs>
<rect x="5" y="5" width="390" height="390" fill="url(#test-linear-gradient)"></rect>
<!-- <rect x="5" y="5" width="390" height="390" fill="blue" mask="url(#test-mask)"></rect> -->
</svg>
</div>
</template>
<script setup>
import { defineProps,computed } from 'vue'
const props = defineProps({
})
</script>
<style scoped>
</style>
3、透明度渐变
透明度渐变
<template>
<div class="container">
<svg width="400" height="400">
<defs>
<mask id="test-mask">
<rect x="5" y="5" width="390" height="390" fill="purple"></rect>
<circle r="50" cx="150" cy="150" />
</mask>
<linearGradient id="test-linear-gradient">
<stop offset="0%" stop-color="red" stop-opacity="1"></stop>
<stop offset="50%" stop-color="green"></stop>
<stop offset="100%" stop-color="blue" stop-opacity="0"></stop>
</linearGradient>
</defs>
<rect x="5" y="5" width="390" height="390" fill="url(#test-linear-gradient)"></rect>
<!-- <rect x="5" y="5" width="390" height="390" fill="blue" mask="url(#test-mask)"></rect> -->
</svg>
</div>
</template>
<script setup>
import { defineProps,computed } from 'vue'
const props = defineProps({
})
</script>
<style scoped>
</style>
4、辐射渐变
辐射渐变
<template>
<div class="container">
<svg width="400" height="400">
<defs>
<mask id="test-mask">
<rect x="5" y="5" width="390" height="390" fill="purple"></rect>
<circle r="50" cx="150" cy="150" />
</mask>
<linearGradient id="test-linear-gradient">
<stop offset="0%" stop-color="red" stop-opacity="1"></stop>
<stop offset="50%" stop-color="green"></stop>
<stop offset="100%" stop-color="blue" stop-opacity="0"></stop>
</linearGradient>
<radialGradient id="test-radial-gradient" r="50%">
<stop offset="0%" stop-color="red" stop-opacity="1"></stop>
<stop offset="100%" stop-color="blue" stop-opacity="1"></stop>
</radialGradient>
</defs>
<rect x="5" y="5" width="390" height="390" fill="url(#test-radial-gradient)"></rect>
<!-- <rect x="5" y="5" width="390" height="390" fill="blue" mask="url(#test-mask)"></rect> -->
</svg>
</div>
</template>
<script setup>
import { defineProps,computed } from 'vue'
const props = defineProps({
})
</script>
<style scoped>
</style>
5、圆形辐射渐变
辐射渐变
<template>
<div class="container">
<svg width="400" height="400">
<defs>
<mask id="test-mask">
<rect x="5" y="5" width="390" height="390" fill="purple"></rect>
<circle r="50" cx="150" cy="150" />
</mask>
<linearGradient id="test-linear-gradient">
<stop offset="0%" stop-color="red" stop-opacity="1"></stop>
<stop offset="50%" stop-color="green"></stop>
<stop offset="100%" stop-color="blue" stop-opacity="0"></stop>
</linearGradient>
<radialGradient id="test-radial-gradient" r="50%">
<stop offset="0%" stop-color="red" stop-opacity="1"></stop>
<stop offset="100%" stop-color="blue" stop-opacity="1"></stop>
</radialGradient>
</defs>
<circle cx="200" cy="200" r="200" fill="url(#test-radial-gradient)"></circle>
<!-- <rect x="5" y="5" width="390" height="390" fill="blue" mask="url(#test-mask)"></rect> -->
</svg>
</div>
</template>
<script setup>
import { defineProps,computed } from 'vue'
const props = defineProps({
})
</script>
<style scoped>
</style>
6、焦点调整
焦点偏离
<template>
<div class="container">
<svg width="400" height="400">
<defs>
<mask id="test-mask">
<rect x="5" y="5" width="390" height="390" fill="purple"></rect>
<circle r="50" cx="150" cy="150" />
</mask>
<linearGradient id="test-linear-gradient">
<stop offset="0%" stop-color="red" stop-opacity="1"></stop>
<stop offset="50%" stop-color="green"></stop>
<stop offset="100%" stop-color="blue" stop-opacity="0"></stop>
</linearGradient>
<radialGradient
id="test-radial-gradient"
cx="50%"
cy="50%"
fx="25%"
fy="75%"
r="50%">
<stop offset="0%" stop-color="white"></stop>
<stop offset="0%" stop-color="yellow"></stop>
<stop offset="100%" stop-color="red" stop-opacity="1.5"></stop>
</radialGradient>
</defs>
<circle cx="200" cy="200" r="200" fill="url(#test-radial-gradient)"></circle>
<!-- <rect x="5" y="5" width="390" height="390" fill="blue" mask="url(#test-mask)"></rect> -->
</svg>
</div>
</template>
<script setup>
import { defineProps,computed } from 'vue'
const props = defineProps({
})
</script>
<style scoped>
</style>
灰白
image.png
<template>
<div class="container bg-grey">
<svg width="400" height="400">
<defs>
<mask id="test-mask">
<rect x="5" y="5" width="390" height="390" fill="purple"></rect>
<circle r="50" cx="150" cy="150" />
</mask>
<linearGradient id="test-linear-gradient">
<stop offset="0%" stop-color="red" stop-opacity="1"></stop>
<stop offset="50%" stop-color="green"></stop>
<stop offset="100%" stop-color="blue" stop-opacity="0"></stop>
</linearGradient>
<radialGradient
id="test-radial-gradient"
cx="50%"
cy="50%"
fx="50%"
fy="50%"
r="50%">
<stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
</radialGradient>
</defs>
<circle cx="200" cy="200" r="200" fill="url(#test-radial-gradient)"></circle>
<!-- <rect x="5" y="5" width="390" height="390" fill="blue" mask="url(#test-mask)"></rect> -->
</svg>
</div>
</template>
<script setup>
import { defineProps,computed } from 'vue'
const props = defineProps({
})
</script>
<style scoped>
.bg-grey{
background-color:#333;
}
</style>
网友评论