@blockquote-web-components/blockquote-directive-svg-to-data-image
v1.4.0
Published
This directive receives a `Lit SVG Template Result` and returns a data URI string.
Downloads
22
Maintainers
Readme
blockquoteDirectiveSvgToDataImage
This directive receives an <svg>
HTML element from a Template Result
and returns it as data URI (data:image/svg+xml).
Demo
Usage
Simple SVG
get _svgTag() {
return html` <svg
xmlns="htt://www.w3.org/2000/svg"
viewBox="0 0 100 100"
height="100px"
width="100px"
>
<!-- ... (SVG content) ... -->
</svg>`;
}
render() {
return html`
<div
aria-hidden="true"
style="background-image: url('${blockquoteDirectiveSvgToDataImage(this._svgTag)}');"
></div>
`;
}
Complex SVG
get _bgTpl() {
return svg` <circle fill="${this.bgFill}" cx="100" cy="100" r="100"></circle> `;
}
get _shapeTpl() {
return svg`
<g fill="#fff">
<!-- ... (SVG content) ... -->
</g>
`;
}
get _svgTag() {
return html`<svg
id="${Math.random().toString(36).substring(2, 10)}"
xmlns="http://www.w3.org/2000/svg"
width="200"
height="200"
focusable="false"
role="presentation"
viewBox="0 0 200 200"
>
${this._bgTpl} ${this._shapeTpl}
</svg>`;
}
render() {
return html`
<div
aria-hidden="true"
style="background-image:var(--bgUrl, url('${blockquoteDirectiveSvgToDataImage(this._svgTag)}'));"
></div>
`;
}
src/BlockquoteDirectiveSvgToDataImage.js
:
Variables
| Name | Description | Type |
| ----------------------------------- | ----------- | ---- |
| blockquoteDirectiveSvgToDataImage
| | |
Exports
| Kind | Name | Declaration | Module | Package |
| ---- | ----------------------------------- | --------------------------------- | ---------------------------------------- | ------- |
| js
| README
| README | src/BlockquoteDirectiveSvgToDataImage.js | |
| js
| blockquoteDirectiveSvgToDataImage
| blockquoteDirectiveSvgToDataImage | src/BlockquoteDirectiveSvgToDataImage.js | |
src/index.js
:
Exports
| Kind | Name | Declaration | Module | Package |
| ---- | ----------------------------------- | --------------------------------- | -------------------------------------- | ------- |
| js
| blockquoteDirectiveSvgToDataImage
| blockquoteDirectiveSvgToDataImage | ./BlockquoteDirectiveSvgToDataImage.js | |