SVG Masking

import { Dom } from "OneJS/Dom"
import { h, render } from "preact"
import { useEffect, useRef, useState } from "preact/hooks"
import { Color, ScriptableObject, Vector2 } from "UnityEngine"
import { Background, Painter2D, StyleBackground, VectorImage } from "UnityEngine/UIElements"
const axeImage = resource.loadImage("Images/wooden_axe.png")
const SomeShape = ({ overflow }) => {
const ref = useRef<Dom>()
useEffect(() => {
var v = ScriptableObject.CreateInstance(VectorImage)
var p = new Painter2D()
paint(p)
p.SaveToVectorImage(v)
ref.current.ve.style.backgroundImage = new StyleBackground(Background.FromVectorImage(v))
}, [])
function paint(paint2D: Painter2D) {
paint2D.strokeColor = Color.white
paint2D.fillColor = Color.white
paint2D.lineWidth = 10;
paint2D.BeginPath()
paint2D.MoveTo(new Vector2(0, 160))
paint2D.LineTo(new Vector2(100, 0))
paint2D.LineTo(new Vector2(200, 160))
paint2D.ClosePath()
paint2D.Fill()
}
return <div ref={ref} style={{ width: 200, height: 200, overflow: overflow ? "Hidden" : "Visible" }}>
<image class="w-full h-full" image={axeImage} />
</div>
}
const App = () => {
const [overflow, setOverflow] = useState(false)
return <div class="w-full h-full flex justify-center items-center">
<SomeShape overflow={overflow} />
<button onClick={() => setOverflow(!overflow)} text="Toggle" />
</div>
}
render(<App />, document.body)