В основном то, что у меня есть, является SVG-файлом, который создает вертикальные линии тени под углом 45 градусов, это дает приятный эффект на фоне веб-страницы с линейным градиентом на тех же 45 градусах. Однако я хочу добавить изображение в файл SVG, чтобы между двумя из 6 строк, созданных SVG, было изображение.Добавление изображения JPEG в векторный SVG
Я сначала попытался просто поместить его туда, где находится SVG, используя CSS, но это на самом деле не получилось, поэтому я попытался найти, как добавить не векторные изображения в векторный SVG, но как этот вопрос вероятно, показывает, что я мало понимаю, как работают файлы SVG.
Ниже приведен код текущего SVG-файла, который я использую. Я также добавил картинку, чтобы показать, как я хочу, чтобы она выглядела.
Не уверен, если это имеет значение, но я знаю, что изображение, которое я хочу добавить, не является вектором, но поскольку изображение, которое я добавлю, очень, очень велико, я довольно уверен, что большинство зрителей моего веб-страница будет видеть его меньше, чем оригинальный размер, который должен поддерживать качество a-ok.
Если кто-то захочет взглянуть на это и хочет помочь мне найти решение для моей проблемы, это было бы высоко оценено. Спасибо!
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000px" height="1000px" viewBox="0 0 1000 1000" zoomAndPan="disable">
<style type="text/css"><![CDATA[
\t \t .p-4 { fill: rgba(255,255,255,0.16); }
\t \t .p-3 { fill: rgba(255,255,255,0.12); }
\t \t .p-2 { fill: rgba(255,255,255,0.08); }
\t \t .p-1 { fill: rgba(255,255,255,0.04); }
\t \t .p0 { fill: none; }
\t \t .p1 { fill: rgba(0,0,0,0.025); }
\t \t .p2 { fill: rgba(0,0,0,0.05); }
\t \t .p3 { fill: rgba(0,0,0,0.075); }
\t \t .p4 { fill: rgba(0,0,0,0.1); }
]]></style>
\t <polygon class="p-4" points="-1125,0 -375,1000 125,1000 -875,0" />
\t <polygon class="p-3" points="-875,0 125,1000 375,1000 -625,0" />
\t <polygon class="p-2" points="-625,0 375,1000 625,1000 -375,0" />
\t <polygon class="p-1" points="-375,0 625,1000 875,1000 -125,0" />
\t <polygon class="p0" points="-125,0 875,1000 1125,1000 125,0" />
\t <polygon class="p1" points="125,0 1125,1000 1375,1000 375,0" />
\t <polygon class="p2" points="375,0 1375,1000 1625,1000 625,0" />
\t <polygon class="p3" points="625,0 1625,1000 1875,1000 875,0" />
\t <polygon class="p4" points="875,0 1875,1000 2125,1000 1125,0" />
</svg>ОБНОВЛЕНО SVG-ФАЙЛ:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000px" height="1000px" viewBox="0 0 1000 1000" zoomAndPan="disable">
<style type="text/css"><![CDATA[
\t \t .p-4 { fill: rgba(255,255,255,0.16); }
\t \t .p-3 { fill: rgba(255,255,255,0.12); }
\t \t .p-2 { fill: rgba(255,255,255,0.08); }
\t \t .p-1 { fill: rgba(255,255,255,0.04); }
\t \t .p0 { fill: none; }
\t \t .p1 { fill: rgba(0,0,0,0.025); }
\t \t .p2 { fill: rgba(0,0,0,0.05); }
\t \t .p3 { fill: rgba(0,0,0,0.075); }
\t \t .p4 { fill: rgba(0,0,0,0.1); }
]]></style>
\t <polygon class="p-4" points="-1125,0 -375,1000 125,1000 -875,0" />
\t <polygon class="p-3" points="-875,0 125,1000 375,1000 -625,0" />
\t <polygon class="p-2" points="-625,0 375,1000 625,1000 -375,0" />
\t <polygon class="p-1" points="-375,0 625,1000 875,1000 -125,0" />
\t <polygon class="p0" points="-125,0 875,1000 1125,1000 125,0" />
\t <polygon class="p1" points="125,0 1125,1000 1375,1000 375,0" />
\t <polygon class="p2" points="375,0 1375,1000 1625,1000 625,0" />
\t <polygon class="p3" points="625,0 1625,1000 1875,1000 875,0" />
\t <polygon class="p4" points="875,0 1875,1000 2125,1000 1125,0" />
\t <image x="20" y="20" width="477" height="640"
xlink:href=../../../images/my_image.png"" />
</svg>
http://tutorials.jenkov.com/svg/image-element.html –
@Paulie_D Благодаря человеку, который был на самом деле именно то, что я был после. Довольно полезный материал. Мне удалось добавить изображение в SVG-файл, но я не понимаю, как я могу заблокировать его с помощью полигонов, чтобы он оставался того же размера при масштабировании или выходе (мой веб-дизайн реагирует, поэтому важно, чтобы изображение Я добавил, что SVG остается того же размера при масштабировании или выходе, так как остальная часть SVG тоже делает это). – Narc
Он должен сохранять свое положение относительно других элементов в SVG. Отправьте обновленный SVG, чтобы мы могли видеть, что вы сделали. –