Как я могу передать изображения на рабочую расстояния краски CSS? ⇐ CSS

[Anonymous]

Я пытаюсь создать пользовательский фон для H1-Tag, используя API CSS Paint. Фон должен быть подключен к тексту, поэтому я хотел бы «раскрасить». Требование состоит в том, чтобы фактически использовать тег H1, а не только рендеринг текста в холсте и использовать режимы композиции. /li>
< /ul>
Спецификация довольно ясна в этом: < /p>

< div class = "snippet-code">

Код: Выделить всё

CSS.registerProperty({
name: '--my-image',
syntax: ' | none',
initialValue: 'none',
inherits: false,
});

class MyWorklet {
static get inputProperties() {
return ['--my-image'];
}

paint(ctx, geom, properties) {
const img = properties.get('--my-image');
console.log(img);
ctx.drawImage(img,10,10,150,180);
}
}
registerPaint('myworklet', MyWorklet);< /code>
< /div>
< /div>
< /p>
Тем не менее, Chromium не поддерживает это. Текущий обходной путь, по-видимому, заключается в прохождении изображений через фоновое изображение:, 

свойство. Это, к сожалению, столкнется с регистрацией рабочей формы краски в качестве фонового изображения (

Код: Выделить всё

background-image: paint(worklet); background-clip: text;

).
Каковы другие способы передачи изображений в рабочую расстояния? Не обязательно должен быть через переменные CSS. Я в порядке с жестким кодированием или импортом изображений непосредственно в рабочую расстояния.

Подробнее здесь: https://stackoverflow.com/questions/684 ... nt-worklet