PHP imagealphablending альтернатива для SVG
Ниже приводится задача, которую я выполнил с помощью PHP GD. И я хочу сделать подобное в SVG.
//Part One
$img = @imagecreatetruecolor(80, 80);
$red = imagecolorallocatealpha($img,255,0,0,0);
$green = imagecolorallocatealpha($img,0,255,0,60);
imagefilledrectangle($img, 0, 0, 80, 80, $red);
imagealphablending($img, false);
imagefilledrectangle($img, 10, 10, 70, 70, $green);//Part Two
$img2 = @imagecreatetruecolor(100, 100);
$blue = imagecolorallocatealpha($img2,0,0,255,0);
imagefilledrectangle($img2, 0, 0, 100, 100, $blue);
//Part Three
imagecopy($img2, $img, 10, 10, 0, 0, 80, 80);
//Part Four
header("Content-Type: image/png");
imagepng($img2);
Описание:
- Часть 1 (Создание первого изображения): —
a: создает изображение 80px / 80px,
б: заполнено красным цветом,
c: Альфингендинг изображения сделан.
d: середина изображения заполнена зеленым цветом с непрозрачностью.
- Часть 2 (Создание второго изображения): —
а. Создает изображение 100px / 100px
б. изображение заполнено синим цветом
-
Часть 3 (Копирование изображения): — Первое изображение накладывается на второе изображение в центре
-
Часть 4 (Показать изображение): — Отображение окончательного изображения
Нажмите здесь, чтобы увидеть изображение, созданное этим кодом
Зеленая часть первого изображения смешивается со вторым изображением. Но красная часть первого изображения не была.
Я хочу точно так же в SVG. Как я могу это сделать? Как можно сделать так, чтобы объект изображения был alpahblending, чтобы изображение позади него можно было смешать с изображением поверх этого изображения?
Обновить:
Нашел что-то интересное, чтобы решить эту проблему. Пробовал следующий код SVG:
<html><body>
<svg width="100" height="100">
<defs>
<linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
<mask id="mask3" x="0" y="0" width="200" height="100" >
<ellipse cx="50" cy="50" rx="100" ry="100" fill="url(#grad3)" />
</mask>
</defs>
<rect x="1" y="1" width="100" height="100" style="stroke: none; fill: #0000ff;"/>
<rect x="10" y="10" width="80" height="80" style="stroke: none; fill: #ff0000; "/>
<rect x="20" y="20" width="60" height="60" style="stroke: none; fill: #00ff00; mask: url(#mask3)"/>
</svg>
</body></html>
Третий прямоугольник должен отображать цвет, который указан в «Маске», теперь он показывает градиент, определенный в маске, но я должен предоставить цвет заливки. Я хочу показать точно такой же цвет или градиент, который я определил в маске. Как я могу это сделать?
Решение
Задача ещё не решена.
Другие решения
Других решений пока нет …