以编程方式生成 SVG 并将其分配给元素的背景图像

Question

我正在使用 svelte 重新创建棋盘游戏。每个 Tile 组件都会传递一个对象，该对象存储每个图块的唯一代码，我想要一个函数来获取此代码并生成一个 SVG 对象，我可以将其设置为组件背景图像。这可能吗？如果可能的话如何？

Tile.svelet:

<script>
    import {generateSVG} from './utils.js';
    export let tile
</script>

<div id={tile.code} class='tile' style={generateSVG(tile.code)}>
    <p>tile.name</p>
</div>

<style>
    .tile {
        width: 50px;
        height: 50px;

        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

我已经尝试了上面的代码，其中 generateSVG() returns 一组字符串

background-image: url(data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><line x1="25" y1="25" x2="25" y2="12"/></svg>)

但这没有任何作用

Answer 1

把url()的内容放在单引号里。

background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><line x1="25" y1="25" x2="25" y2="12" stroke="red"/></svg>')

Stripped down example with stroke color

以编程方式生成 SVG 并将其分配给元素的背景图像

Programatically generating an SVG and assigning it to the background-image of an element

css

svg

components

reactjs

svelte