Comments (3)
@mars092 привет! Допустим, у тебя спрайт собрался из one.svg
, two.svg
и three.svg
. Тебе надо вывести на страницу one.svg
, значит:
<img src="img/sprites/sprite.svg#one">
from gulp-scss-starter.
@andreyalexeich Спасибо за ответ, но...
Было бы хорошо описать в документации про svg use.
К примеру мы добавили svg logo.svg
и обратится к нему нужно в таком виде:
<svg>
<use xlink:href="img/sprites/sprite.svg#logo"></use>
</svg>
Что бы поменять цвет svg нужно в css обратится к нему в таком виде:
svg use {
fill: red;
}
Но что бы это заработало в svg нужно почистить некоторые параметры. К примеру в таком виде отдает svg figma:
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.90918 4.04542L13.091 9.54088L4.90918 14.9545L4.90918 4.04542Z" fill="#1B1B1D"/>
</svg>
Нужно удалить эти кусочки fill="none"
и fill="#1B1B1D"
. Должно получится вот так:
<svg width="18" height="19" viewBox="0 0 18 19" xmlns="http://www.w3.org/2000/svg">
<path d="M4.90918 4.04542L13.091 9.54088L4.90918 14.9545L4.90918 4.04542Z" />
</svg>
from gulp-scss-starter.
Сделано
from gulp-scss-starter.
Related Issues (20)
- Интеграция с jQuery не работает. HOT 3
- Проблема с отслеживанием файлов HOT 6
- На Ubuntu возникает ошибка "SyntaxError: Cannot use import statement outside a module ..." HOT 2
- С 16 версией nodejs не работает. HOT 16
- Существует проблема с babel-loader HOT 1
- Предложение добавить watcher для настройки сетки smartgrid HOT 1
- Не отображаются картинки HOT 1
- ошибки при установке MAC
- Не работают картинки HOT 1
- Пожалуйста, подправьте readme HOT 1
- Рецепт, как пофиксить нерабочий browser-sync-ui
- Как получить переменную, указывающую production
- Чем отличается создание БЭМ-блока от БЭМ-компонента? HOT 1
- Добавьте ngrok
- баг вылез, может подскажешь с чем связано. 2 раза переустанавливал HOT 3
- Пакет dev в зависимостях. HOT 1
- В чем проблема ?
- Не формирует папку с файлом /styles/main.css
- Как правильно подключить библиотеки? HOT 17
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gulp-scss-starter.