@blockquote-web-components/blockquote-directive-svg-to-data-image
1.4.1 • Public • Published blockquoteDirectiveSvgToDataImage
This directive receives an <svg>
HTML element from a Template Result
and returns it as data URI (data:image/svg+xml).
svg-templates
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>
`;
}
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
:
Name |
Description |
Type |
blockquoteDirectiveSvgToDataImage |
|
|
Kind |
Name |
Declaration |
Module |
Package |
js |
README |
README |
src/BlockquoteDirectiveSvgToDataImage.js |
|
js |
blockquoteDirectiveSvgToDataImage |
blockquoteDirectiveSvgToDataImage |
src/BlockquoteDirectiveSvgToDataImage.js |
|
Kind |
Name |
Declaration |
Module |
Package |
js |
blockquoteDirectiveSvgToDataImage |
blockquoteDirectiveSvgToDataImage |
./BlockquoteDirectiveSvgToDataImage.js |
|
Package Sidebar
Install
npm i @blockquote-web-components/blockquote-directive-svg-to-data-image
Weekly Downloads