我正在使用 svelte 重新創建棋盤游戲。每個 Tile 組件都傳遞一個物件，該物件存盤每個 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() 回傳一個集合字串
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>)
但這無濟于事
uj5u.com熱心網友回復：
將 的內容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>')
使用描邊顏色的精簡示例
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/428960.html
上一篇：使用React-Hook-Form和Yup驗證檔案（<x>必須是`object`型別，但最終值為：`null`）
下一篇：Redux-Toolkit中的RTK查詢正在回傳NextJS中未定義的資料，當我console.log資料時，它出現在控制臺中