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;
    }

live demo

live demo