Vue-svg-text NPM

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