我想將 svg 檔案顯示為 konva 中的路徑。
但我在造型上有問題。
而且radialGradient 并不適用。
而且我也不想使用 Konva.Image。
我在這里寫兩個：
VSG 檔案：
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Game" xmlns="http://www.w3.org/2000/svg" width="540.1" height="540.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 540.1 540.1">
<defs>
<linearGradient id="linear-gradient" x1="40" y1="0" x2="40" y2="80" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff"/>
<stop offset=".2" stop-color="#fbfbfb"/>
<stop offset=".3" stop-color="#f2f2f2"/>
<stop offset=".5" stop-color="#e1e1e1"/>
<stop offset=".6" stop-color="#cacaca"/>
<stop offset=".7" stop-color="#acacac"/>
<stop offset=".8" stop-color="#888"/>
<stop offset=".9" stop-color="#5d5d5d"/>
<stop offset="1" stop-color="#333"/>
</linearGradient>
</defs>
<circle id="Player" cx="40" cy="40" r="40" fill="url(#linear-gradient)"/>
</svg>
JS：
var circle = new Konva.Circle({
radius: 40,
fillLinearGradientStartPoint: { x: 40, y: 0 },
fillLinearGradientEndPoint: { x: 40, y: 80 },
fillLinearGradientColorStops: [0, '#fff', 0.2, '#fbfbfb', 0.3, '#f2f2f2', 0.5, '#e1e1e1', 0.6, '#cacaca', 0.7, '#acacac', 0.8, '#888', 0.9, '#5d5d5d', 1, '#333',],
//gradientUnits:"userSpaceOnUse"
scale: { x: 3, y: 3 }
})
uj5u.com熱心網友回復：
fillLinearGradientStartPoint并且fillLinearGradientEndPoint相對于形狀的原點。如果Konva.Circle它是圓的中心。
做這個：
const shape = new Konva.Circle({
x: 200,
y: 200,
radius: 40,
fillLinearGradientStartPoint: { x: 0, y: -40 },
fillLinearGradientEndPoint: { x: 0, y: 40 },
fillLinearGradientColorStops: [0, '#fff', 0.2, '#fbfbfb', 0.3, '#f2f2f2', 0.5, '#e1e1e1', 0.6, '#cacaca', 0.7, '#acacac', 0.8, '#888', 0.9, '#5d5d5d', 1, '#333',],
scale: { x: 3, y: 3 }
});
演示：https ://jsbin.com/qibanicuto/1/edit?html,js,output
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/529262.html
標籤：javascriptsvg帆布html5-画布康瓦伊斯
下一篇：如何在SVG上進行反透視變換