SVG z-порядок с непрозрачностью < 1
Я создаю SVG-изображение (древовидную карту с эллипсами для узлов), где я хочу соединить эллипсы с линиями, но я хочу, чтобы линии начинались по краям эллипсов. Так как вычислить, где ребра падают, и точно начать и закончить линии там очень сложно, я рисую линии из центров эллипсов и ищу способ наложения эллипса на линию так, чтобы он маскировал перекрывающаяся часть, создающая видимость того, что линии начинаются только на краю эллипса. Поскольку SVG реализует z-порядок через порядок элементов, если я сначала создаю соединительные линии, а затем эллипсы, это работает, за исключением того, что...
... Я хочу, чтобы эллипсы были синего или красного цвета с fill-opacity="0.15", но когда я это сделаю, линии просвечивают. Конечно, имеет смысл, что что-то с низкой непрозрачностью не может полностью замаскировать то, что оно покрывает, но мне трудно понять, как я могу получить желаемый эффект. Я нашел одно рабочее решение: для каждого желаемого эллипса я сначала создаю эллипс того же размера и позиции с белой заливкой и непрозрачностью 1, который полностью маскирует соединительную линию там, где они перекрываются. Затем я накладываю на белый эллипс эллипс, который я действительно хочу визуализировать, с синей или красной заливкой и непрозрачностью 0,15. Это выглядит так, как я хочу, но кажется клёвым. Есть ли изящное решение, которое я пропускаю?
2 ответа
Вы должны получить цвет после того, как он сделал fill-opacity на белом фоне.
Сделайте снимок экрана вашего SVG, откройте его в программе для редактирования графики, такой как Photoshop, используйте инструмент пипетки, чтобы проверить визуализированный цвет и скопируйте шестнадцатеричное значение. Затем используйте его как цвет заливки с fill-opacity="1"
Вы можете использовать отсечение или маскирование.
Нарисуйте линии полностью, но обрежьте их ко всему, кроме эллипсов.