vue-svg-text
使用 svg 生成文本
props
| 字段名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| width | String | "100px" | 组件的宽度 |
| text | String | "SvgText" | 组件显示的文本内容 |
| colors | Array | ["gold"] | 组件的渐变颜色,可以用这种方式指定渐变位置的百分比["lightgreen 50%","lightpink 80%"] |
| stroke | Object | {color: "black", width: 0} | 组件的描边颜色和宽度 |
| shadow | Object | {offsetX: 0, offsetY: 0, blur: 0, color: "black"} | 组件的投影效果 |
| lineSpacing | Number | 0 | 组件的行间距 |
| textAlign | String | "left" | 组件的文本对齐方式，可选值："left","center","right" |
| gradientType | String | "linear" | 组件的渐变类型，可选值 "linear" 和 "radial" |
| textLength | String | 无 | 指定文本长度的百分比值，如："100%" |
| lengthAdjust | String | "spacing" | 文本伸缩方式，可选值为"spacing"和"spacingAndGlyphs" |
| ellipsisLine | Number | 无 | 组件的省略行数 |
| radialGradient | Object | {} | 组件的径向渐变效果, 详见 radialGradient |
| linearGradient | Object | {} | 组件的线性渐变效果, 详见linearGradient |
useage
import SvgText from "./components/svg-text";
<SvgText
class="st_wrap"
text="VUE-SVG-TEXT"
width="500px"
:stroke="{ width: 2, color: 'black' }"
:colors="['lightgreen', 'lightpink']"
:shadow="{ offsetX: 0, offsetY: 3, blur: 3, color: '#666' }"
/>
//style
.st_wrap {
font-size: 30px;
font-weight: 800;
}