Document

Цвет заливки SVG не работает

Я новичок в использовании SVG и не могу понять, что я здесь делаю не так. Для большинства из них, если я хочу изменить цвет, я использую:

Но для этого — и других, с которыми я сталкивался — по какой-то причине этот способ не работает.

.logo-wrapper svg < width: 300px; >.logo-wrapper svg path

5 ответов

Вы можете просто добавить !important рядом с заливкой

.logo-wrapper svg < width: 300px; >.logo-wrapper svg path < fill: green !important; >.logo-wrapper svg text

На вашем пути есть встроенный CSS с заполнением. Это отменяет другие ваши css. Можно исправить с помощью! Important. Или вы можете удалить встроенный CSS.

По возможности старайтесь избегать использования !important . Вместо этого постарайтесь сделать ваши селекторы более конкретными. Помните, что inline имеет приоритет над id , который имеет приоритет над классами, который имеет приоритет над элементами.

Ваше решение может быть таким же простым, как добавление дополнительного класса или, в случае единственного элемента, id .

Для более подробного объяснения прочтите эту статью

Если вы не контролируете свой SVG (возможно, потому, что он поступает из внешнего источника, который вы переназначаете), вы застряли в использовании !important для переопределения свойства SVG fill .

Если ваш SVG находится в базе кода, гораздо лучше установить fill=»currentColor» , а затем установить свойство цвета CSS.

Источник

[Fix] CSS SVG fill not working

We can change the color of a SVG path or element with the fill property. However theres many ways to get it wrong. This post goes over the fixes.

Dec 15, 2022 | Read time 8 minutes

🔔 Table of contents

Introduction

While working with SVGs in one of my web designs, I noticed setting the fill property did not work. I wanted to fill my SVG with a color!

• Check that the syntax with the fill property is correct
• Make sure to use inline SVGs instead of external
• If you are using url() method — make sure to encode values such as # in hex colors
• Check if there is a fill attribute in the SVG itself. When there is a fill attribute, the CSS fill property will not work!

1. Check that the syntax with the fill property is correct

Usually to color a SVG shape, we can use the fill to set the color. There are several ways to do this, so it could lead to mistakes and making it

not work as expected. Generally, there are 4 ways to do this:

a. Using the fill attribute on the SVG element. In the below we add fill=»blue» to the Apple logo.

b. Using embedded CSS. We can “embed” the CSS inside our SVG element using the tag (definitions). This just means that we want to add elements that are not part of the SVG. In our case this is the styling:

c. The last sytax option to check is use of external or inline CSS. For external CSS, make sure that you have referenced the files correctly.

For inline CSS, make sure that we are targeting the correct element.

2. Make sure to use inline SVGs instead of external

One issue with using fill in CSS that comes up is when using SVG as an external. Lets say we have an external SVG file named apple.svg . Now we want to include that in our

HTML like so (using the tag):

Now when we try to apply the fill CSS style, it will NOT work.

One option to fix this is: we need to add our SVG as a inline element, instead of loading it externally:

Tip: If you really need to use external SVG files, can use the currentColor technique

If we do not want to litter our HTML with a bunch of nasty looking inline SVGs, we can use the currentColor technique.

For this, we just need to modify our SVG to have fill:currentColor .

Then in our CSS, we can target this, by changing the color property.

As an example, consider the following SVG of the Apple logo. We added a fill attribute fill=»currentColor» :

Now in our CSS, we can use the following to color property to change the fill color to red:

With SVGs, we can include them in our CSS background property like below:

The problem with the above is that our fill attribute is using a HEX value #FF0000 . For url() to work, we need to encode the string. In this case # becomes %23

So the fix will be changing to fill=’%23FF0000′

4. Check if there is a fill attribute in the SVG itself.

• inline CSS styles
• fill HTML attribute on the SVG element
• embeded fill styling inside the tag
• external CSS

So if you already have set a fill value on the SVG element, the CSS that is external with fill values will not work! They will be overwritten!

Browser support

• Support for this is wide across modern browsers. Only issues comes up when you need to support older browsers like IE.
• IE9-11 & Edge don’t properly scale SVG files and limited support on animations!

Summary

In this post, I went over a few reasons why using SVG fill is not working for our CSS.

There are various reasons since there so many ways to fill a SVG path/ element.

Some things to look out for include: checking if we got the right syntax, checking that there are no style conflicts or being overwritten, verify that we encode urls when loading SVGs with the url() method!

👋 About the Author

G’day! I am Kentaro a software engineer based in Australia. I have been creating design-centered software for the last 10 years both professionally and as a passion.

My aim to share what I have learnt with you! (and to help me remember 😅)

👉 See Also 👈

Источник

Цвет заливки SVG не работает

Я новичок в использовании SVG и не могу понять, что я здесь делаю неправильно. Для большинства из них, если я хочу изменить цвет, я использую:

Но для этого — и других, которые я встречал — этот способ почему-то не работает. Скрипка, демонстрирующая проблему HTML

.logo-wrapper svg < width: 300px; >.logo-wrapper svg path

Ответы (7)

.logo-wrapper svg < width: 300px; >.logo-wrapper svg path < fill: green !important; >.logo-wrapper svg text

Спасибо! Другая моя проблема заключалась в том, что я не знал, как настроить таргетинг на svg txt, но теперь это имеет смысл 🙂 — person Kevmon; 28.09.2016

@HonsaStunna Это потому, что встроенные стили (используемые SVG) по умолчанию переопределяют внешние стили CSS. — person Swen; 15.07.2018

На вашем пути есть встроенный css с заливкой. Это переопределяет ваш другой css. Можно исправить с помощью !important. Или вы можете удалить встроенный css.

Это единственное, что работает! Спасибо. Просто добавьте к пути имя вашего класса, и вы сможете напрямую изменить конкретный файл svg. — person KJ Sudarshan; 04.05.2021

.logo-wrapper svg < width: 300px; >.logo-wrapper svg path

Если вы не контролируете свой SVG, возможно, из-за того, что он исходит из внешнего источника, который вы перенастраиваете), вы застряли, используя !important для переопределения свойства SVG fill . Если ваш SVG находится в вашей кодовой базе, гораздо лучше установить fill=»currentColor» , а затем установить свойство цвета CSS. Ваш HTML:

Насколько это возможно, старайтесь избегать использования !important . Вместо этого постарайтесь сделать свои селекторы более конкретными. Помните, что inline имеет приоритет над id , который имеет приоритет над классами, которые имеют приоритет над элементами. Ваше решение может быть таким же простым, как добавление дополнительного класса или, в случае одного элемента, id . HTML

кажется, что svg имеет свойство заполнения, поэтому, если у вас нет контроля над svg (т.е. темами), потребуется переопределение css — person chaqke; 16.06.2020

Если у вас есть доступ к внутреннему коду svg, просто установите для параметра path значение fill=»currentColor» , а затем установите обычную опору color, а не fill в родительский svg, например:

Я не мог отобразить CSS SVG, пока совершенно случайно не обнаружил, что кавычки для значения атрибута в SVG не обязательны, как в HTML для значений, не содержащих пробелов. Кроме того, шестнадцатеричное значение, например fill=»#00BB00″ , у меня не сработает, даже если использовать совет fill=»currentColor» ( fill=»green» работает). Наконец, если вы используете url() в CSS, вы не можете включать новые строки или опускать атрибут xmlns.

Источник

fill property of SVG does not working in Chrome

Trouble is that I can’t set value (color) in fill property in Chrome, but in Firefox it works. I tried a lot ways to do it, but there is no result. The only way I see to change color of SVG icon is via jQuery (or JavaScript) by changing id of , which is below. Please help me solve this problem!

This is what I need to work in Chrome:

     span:hover .pathCrossBtn     

This is bad way to solve my problem which is not approriate for me.

Answers

Use currentcolor in the path fill attribute of the element.

The currentcolor keyword represents the value of an element’s color property. This lets you use the color value on properties that do not receive it by default.

Then, add a color CSS property to the class of the container that will wrap the instantiated by the element.

The problem with this answer is that the x=»» and y=»» attributes don’t work on all svg elements, in your case they are valid on the text element but not the path.

My answer involves css transform: translate() . These values (along with the inline path attribute transform=»translate()» ) get reset when you try to run an animation on the same element, as the animation is also a transform — transform: rotate() . I tried to chain the translate onto the rotate, but this weirdly didn’t work in FF either.

I wrapped the path in two g ‘s. The path and the outer group are used for offset/reset alignment, and the middle one for the animation.

To get webfonts to render with good antialias in Chrome on Windows, you need to use this format in the font declaration:

@font-face < font-family: 'Futura'; src: url('futura.eot'); src: url('futura.eot?#iefix') format('embedded-opentype'), url('futura.woff') format('woff'), url('futura.ttf') format('truetype'), url('futura.svg#futura') format('svg'); font-weight: normal; font-style: normal; >@media screen and (-webkit-min-device-pixel-ratio:0) < @font-face < font-family: 'Futura'; src: url('futura.svg#futura') format('svg'); >> 

Basically, you need to force Chrome to use the SVG font format. You can do this by moving the url for the .svg version to the top, however Chrome on Windows has had problems with messing up the layout when doing this (up to and including version 30). By overriding the font declaration using a media query, these issues are solved.

Also: Sometimes the baseline position doesn’t match between OpenType fonts and SVG fonts but you can adjust this by simply editing the SVG font files. SVG fonts are xml based and if you look at the declaration

You can change the value for ascent and get it to match the other font format versions.

This wasn’t a problem with the code or css, its apparently a known problem with my version of Chrome. Basically, even if certain images/files are cached, Chrome still tries a if-modified-since GET request to server. So to fix, I’ve set the expiry times for cache filetypes using the .htaccess file to override this — i.e. ExpiresByType image/jpg «access plus 4 hours» http://code.google.com/p/chromium/issues/detail?id=102706

To wrap grid in vertical direction you have to do a bit more:

• specify a height for the grid container so that the grid items know when to wrap,
• also specify grid-auto-flow: column (overriding default grid-auto-flow: row )

See demo below (have set height: 100% for illustration):

body, html < height: 100%; margin: 0; >.wrapper < display: grid; grid-template-rows: repeat(auto-fill, minmax(140px, 200px)); grid-auto-flow: column; /* added */ height: 100%; /* adjust this*/ >.wrapper>div:nth-child(odd)

Why specify a height?

Because auto-fill or auto-fit requires a definite dimension in that axis:

7.2.3.2. Repeat-to-fill: auto-fill and auto-fit repetitions

When auto-fill is given as the repetition number, if the grid container has a definite size or max size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow the content box of its grid container (treating each track as its max track sizing function if that is definite or as its minimum track sizing function otherwise, and taking gap into account); if any number of repetitions would overflow, then 1 repetition. Otherwise, if the grid container has a definite min size in the relevant axis, the number of repetitions is the smallest possible positive integer that fulfills that minimum requirement. Otherwise, the specified track list repeats only once.

Auto-fill in row direction is simpler

Note that here, you don’t need to specify a width as display: grid is a block element and block elements have the width of the viewport. You can just use grid-template-columns: repeat(auto-fill, minmax(140px, 200px)) here:

body, html < height: 100%; margin: 0; >.wrapper < display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 200px)); /*grid-auto-flow: row; -->default (so not needed) */ > .wrapper>div:nth-child(odd)

Why grid-auto-flow: column ?

See the relevant excerpts from its definition — this property controls how grid items flow in a grid container if they are not explicitly placed:

grid-auto-flow

The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

The default value of grid-auto-flow is row which is why you need to override it to column :

row

The auto-placement algorithm places items by filling each row in turn, adding new rows as necessary. If neither row nor column is provided, row is assumed.

Источник