#html #css #svg
#HTML #css #svg
Вопрос:
Моя цель — использовать SVG повторяющийся фон, но мне нужно иметь возможность изменять его fill цвет CSS для использования в разных частях веб-сайта.
Насколько я понимаю SVG , он не может быть отображен как внешний file ( background:url(image.svg) ), потому что тогда я не могу изменить CSS свойство, подобное fill proeprty. С другой стороны, SVG не может быть встроен в HTML ( <svg>...</svg> ), так как тогда я не могу использовать / ссылаться на него в background свойстве.
Пожалуйста, поправьте меня, если я ошибаюсь, или у вас есть какое-либо решение для этого?
Комментарии:
1. вы можете динамически создавать весь SVG с помощью javascript, преобразовывать его в URL-адрес данных и использовать его в качестве фона.
2. svg может быть внешним файлом, и svg определенно может быть встроенным .. <- это только мое мнение .. Пожалуйста, подождите других
3. @Amit уверен, что это может быть и то, и другое, но как насчет изменения свойства заливки в CSS?
4. @RobertLongson спасибо, но не уверен, как это мне поможет. Вы имеете в виду генерировать его несколько раз с одним и тем же JS-кодом, но с разной заливкой для каждого?
5. используйте шаблон, если звезды идентичны.
Ответ №1:
Насколько я понимаю SVG, он не может быть отображен как внешний файл (background:url (image.svg)), потому что тогда я не могу изменить свойство CSS, например, заполнить его.
Рассмотрите возможность использования CSS-фильтров для изменения цвета svg вместо fill
В приведенном ниже примере файл svg загружается как внешний файл:
background-image:url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg);
и его цвет будет изменен при наведении курсора мыши с использованием комбинации фильтров css
Вы можете получить желаемую комбинацию фильтров для определенного цвета с помощью утилиты
https://codepen.io/sosuke/pen/Pjoqqp
Наведите курсор, чтобы изменить цвет
.android {
display:inline-block;
width:96px;
height:105px;
background-image:url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg);
}
.android.blue:hover {
filter: invert(8%) sepia(99%) saturate(7454%) hue-rotate(248deg) brightness(100%) contrast(143%);
}
.android.red:hover {
filter: invert(25%) sepia(100%) saturate(7420%) hue-rotate(6deg) brightness(98%) contrast(122%);
}
.android.gold:hover {
filter: invert(50%) sepia(31%) saturate(3357%) hue-rotate(113deg) brightness(99%) contrast(101%);
} <div class="android blue">
</div>
<div class="android red">
</div>
<div class="android gold">
</div> Комментарии:
1. ОК. сначала я подумал об этом как об обходном пути, а не как о решении, и ожидал либо чистого svg-способа, либо ответа типа «нет, это невозможно». но, в конце концов, если это единственный способ, то для будущих посетителей его можно использовать как решение. приветствия
Ответ №2:
Хорошо, это не очень просто, но это можно сделать, немного поработав с самим SVG. если вы посмотрите на простой пример, который вы увидите внутри тега под, вы можете по существу создать шаблон из любых элементов SVG, таких как круг, прямоугольник или путь. Поэтому создайте шаблон в виде
<pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
убедитесь, что ширина и высота совпадают с вашими SVG, иначе они будут обрезаны
затем за пределами defs вы можете создать прямоугольный объект с заливкой вашего шаблона fill="url(#dots)" , для этого должен использоваться идентификатор шаблона
Простой пример
.pattern {
background-color: #2e4057;
height: 100vh;
} <div class="pattern">
<svg width="100%" height="100%">
<defs>
<pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<circle fill="#bee9e8" cx="50" cy="50" r="25">
</circle>
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#dots)"></rect>
</div> Более продвинутый SVG
.pattern {
background-color: #2e4057;
height: 100vh;
} <div class="pattern">
<svg width="100%" height="100%">
<defs>
<pattern id="duck" x="0" y="0" width="209" height="209" patternUnits="userSpaceOnUse">
<g>
<path fill="red" d="M105.572,101.811c9.889-6.368,27.417-16.464,28.106-42.166c0.536-20.278-9.971-49.506-49.155-50.878
C53.041,7.659,39.9,28.251,36.071,46.739l-0.928-0.126c-1.932,0-3.438,1.28-5.34,2.889c-2.084,1.784-4.683,3.979-7.792,4.308
c-3.573,0.361-8.111-1.206-11.698-2.449c-4.193-1.431-6.624-2.047-8.265-0.759c-1.503,1.163-2.178,3.262-2.028,6.226
c0.331,6.326,4.971,18.917,16.016,25.778c7.67,4.765,16.248,5.482,20.681,5.482c0.006,0,0.006,0,0.006,0
c2.37,0,4.945-0.239,7.388-0.726c2.741,4.218,5.228,7.476,6.037,9.752c2.054,5.851-27.848,25.087-27.848,55.01
c0,29.916,22.013,48.475,56.727,48.475h55.004c30.593,0,70.814-29.908,75.291-92.48C180.781,132.191,167.028,98.15,105.572,101.811
z M18.941,77.945C8.775,71.617,4.992,58.922,5.294,55.525c0.897,0.24,2.194,0.689,3.228,1.042
c4.105,1.415,9.416,3.228,14.068,2.707c4.799-0.499,8.253-3.437,10.778-5.574c0.607-0.509,1.393-1.176,1.872-1.491
c0.87,0.315,0.962,0.693,1.176,3.14c0.196,2.26,0.473,5.37,2.362,9.006c1.437,2.761,3.581,5.705,5.646,8.542
c1.701,2.336,4.278,5.871,4.535,6.404c-0.445,1.184-4.907,3.282-12.229,3.282C30.177,82.591,23.69,80.904,18.941,77.945z
M56.86,49.368c0-4.938,4.001-8.943,8.931-8.943c4.941,0,8.942,4.005,8.942,8.943c0,4.931-4.001,8.942-8.942,8.942
C60.854,58.311,56.86,54.299,56.86,49.368z M149.159,155.398l-20.63,11.169l13.408,9.293c0,0-49.854,15.813-72.198-6.885
c-11.006-11.16-13.06-28.533,4.124-38.84c17.184-10.312,84.609,3.943,84.609,3.943L134.295,147.8L149.159,155.398z"/>
</g>
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#duck)"></rect>
</svg> надеюсь, это поможет
более полное руководство здесь
Комментарии:
1. спасибо за этот пример, но все же я не вижу возможности изменить заливку элементов (уточки здесь)
2. вы можете изменить заполнение самого пути, чтобы отредактировать фрагмент, чтобы показать вам
3. или вы можете присвоить пути класс / идентификатор и добавить заливку в свой файл css
4. Я считаю, что этот пример статичен. Это означает, что вы можете изменить цвет, но не можете изменить для многократного использования одного и того же svg. Другими словами, я все еще не вижу возможности повторно использовать svg и изменять заливку на ходу