简单的 SVG 占位符

一个非常简单的占位符图像生成器,零依赖性. 返回一个数据 URI(或原始 SVG 源)作为模板使用的字符串 .

开始

软件包可以通过 npm 安装:

npm i --save @cloudfour/simple-svg-placeholder

安装后,您可以导入此功能作为 ES 或 CommonJS 模块 :

// Module
import simpleSvgPlaceholder from '@cloudfour/simple-svg-placeholder';

// CommonJS
const simpleSvgPlaceholder = require('@cloudfour/simple-svg-placeholder');

然后调用函数生成占位符 SVGs :

const placeholder = simpleSvgPlaceholder(/* options */);
// => 'data:image/svg+xml;...'

实例

默认

simpleSvgPlaceholder();

尺寸

simpleSvgPlaceholder({
  width: 180,
  height: 135,
});

文本

simpleSvgPlaceholder({
  text: 'Hello world!',
});

颜色

simpleSvgPlaceholder({
  bgColor: '#0F1C3F',
  textColor: '#7FDBFF',
});

字体

simpleSvgPlaceholder({
  fontFamily: 'Georgia, serif',
  fontWeight: 'normal',
});

选项参考

宽度 {Number}

默认为 300,大多数浏览器中SVG元素的默认宽度.

高度 {Number}

默认为 150,大多数浏览器中SVG元素的默认高度.

文本 {String}

要显示的文本 。 默认图像维度 .

此处作为文字而非标记处理: XML (英语)&, (中文(简体) ), <, (中文(简体) ), >, (中文(简体) ), "为你而逃,所以 'Tom & Jerry' 作为 写入而非生成 SVG 浏览器拒绝解析 .

字体家庭 {String}

用于文本的字体。 对于数据 URI,这需要是一个系统安装的字体. 默认为 'sans-serif'。 。 。 .

字体重量 {String}

默认为 'bold'。 。 。 .

字体大小 {Number}

默认为最短图像尺寸的20%,四舍五入.

阳 {Number}

对 页:1 dy 属性 文本元素,使其以垂直为中心。 默认为35% fontSize。 。 。 .

bg 颜色 {String}

图像的背景颜色 。 默认为 #ddd。 。 。 .

文本颜色 {String}

文字之色相. 为透明起见,使用 rgba 或者说 hsla 颜色值. 默认为 rgba(0,0,0,0.5)。 。 。 .

数据Uri {Boolean}

若为 true,该函数将返回编码字符串,用作 img 元素的 src 数值。 若为 false,该函数将返回未编码的 SVG 源,适合插入文档。 默认为 true。 。 。 .

字符集 {String}

默认为 UTF-8,但如果源 HTML 文档的字符集不同,您可能想要更新以匹配.