CSS - Style svg fill with class name
If you want to have the class in the SVG you'll have to do something like this
.play-triangle>g { fill: red;}<svg class="play-triangle" width="100px" height="107px" viewBox="0 0 10 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <g id="Guide" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="Iconography" sketch:type="MSArtboardGroup" transform="translate(-421.000000, -286.000000)"> <path d="M421.002864,301.137442 C421.001935,301.394293 421.098144,301.651636 421.293405,301.846897 C421.686652,302.240144 422.317878,302.236638 422.709368,301.845148 L429.778687,294.775829 L430.485793,294.068722 L422.709368,286.292297 C422.322784,285.905713 421.68393,285.900024 421.293405,286.290548 C421.086336,286.497617 420.989274,286.77067 421.000938,287.039961 C421.000655,287.049803 421.000512,287.059682 421.000512,287.069594 L421.000512,301.067851 C421.000512,301.091254 421.001305,301.114459 421.002864,301.137442 L421.002864,301.137442 L421.002864,301.137442 Z" id="Rectangle-78" sketch:type="MSShapeGroup"></path> </g> </g></svg>Set inline SVG fill color by CSS related to outside classname
The problem is that you use the ID "Pattern" twice. Each ID may only be used once, or the browser will only interpret the first occurrence. The second SVG refers to the first pattern and is therefore red. Just rename the second ID.
.red { margin-bottom: 50px;}
.red svg path { fill: #ff0000;}
.green svg path { fill: #00ff00;}<div class='red'> <p> Red triangles </p> <svg viewBox="0 0 10000 20" width="10000" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"> <defs> <pattern id="Pattern" x="0" y="0" width=".006" height="20"> <path d="M15 10L0 0L30 0L60 0L45 10L30 20L15 10Z"></path> </pattern> </defs> <rect fill="url(#Pattern)" width="10000" height="20"/> </svg> </div> <div class='green'> <p> Green triangles </p> <svg viewBox="0 0 10000 20" width="10000" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"> <defs> <pattern id="Patterntwo" x="0" y="0" width=".006" height="20"> <path d="M15 10L0 0L30 0L60 0L45 10L30 20L15 10Z"></path> </pattern> </defs> <rect fill="url(#Patterntwo)" width="10000" height="20"/> </svg> </div>How to style SVG with external CSS?
Your main.css file would only have an effect on the content of the SVG if the SVG file is included inline in the HTML:
https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction
<html>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
<path d="M28.44......."/>
</g>
</svg>
</html>
If you want to keep your SVG in files, the CSS needs to be defined inside of the SVG file.
You can do it with a style tag:
http://www.w3.org/TR/SVG/styling.html#StyleElementExample
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="50px" height="50px" viewBox="0 0 50 50">
<defs>
<style type="text/css"><![CDATA[
.socIcon g {
fill:red;
}
]]></style>
</defs>
<g>
<path d="M28.44......./>
</g>
</svg>
You could use a tool on the server side to update the style tag depending on the active style. In ruby you could achieve this with Nokogiri. SVG is just XML. So there are probably many XML libraries available that can probably achieve this.
If you're not able to do that, you will have to just have to use them as though they were PNGs; creating a set for each style, and saving their styles inline.
SVG fill with css variables
Okay here we go... I will first explain why it does not work and then I will show an alternative.
Why your approach doesn't work
In your example the svg is not part of the DOM. So you cannot use css to modify the attributes of the svg.
What you are doing is adding an inline-style to the svg in your url. Since the browser does not recognise --primary-color as a color it doesn't work.
An alternative approach
An alternative approach is to put the svg in the html and fake a background. I did this by absolute positioning the svg and moving it to the background with z-index.
Do note you will have to modify the svg or the positioning to place the background in the way you want. Normally you would use background-size for this. But with some effort you can replicate this behaviour within the svg or position it better by using css.
:root { --primary-color: hsl(332, 61%, 78%);}
div { width: 100px; height: 100px; }
.test { background: var(--primary-color);}.icon{ /*postion relative for absolute positioning to work*/ position: relative; }.icon>svg{ position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px; z-index: -1;}.icon>svg>path{ /*target the image with css*/ fill: var(--primary-color);}<div class="test"> Testing the css variable color</div>
<div class="icon"> <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129' id='background'><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z'/> </svg> <p>Text goes here...</p></div>How can I change the color of an 'svg' element?
You can't change the color of an image that way. If you load SVG as an image, you can't change how it is displayed using CSS or JavaScript in the browser.
If you want to change your SVG image, you have to load it using <object>, <iframe> or using <svg> inline.
If you want to use the techniques in the page, you need the Modernizr library, where you can check for SVG support and conditionally display or not a fallback image. You can then inline your SVG and apply the styles you need.
See:
#time-3-icon {
fill: green;
}
.my-svg-alternate {
display: none;
}
.no-svg .my-svg-alternate {
display: block;
width: 100px;
height: 100px;
background-image: url(image.png);
}<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206
C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161
C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505
c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081
c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/>
</svg>
<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />Apply CSS style when clicked on SVG element
I am trying to set the CSS style for the clicked element.
One approach to achieve this effect is to give the element an HTML5 Custom data-* attribute like this:
data-clicked="false"
You can then use javascript, to detect a click on the element and update the attribute.
To detect the click with javascript, use:
myElement.addEventListener('click', myFunction, false);
To modify the attribute use:
myElement.dataset.myAttribute = myValue;
Working Example:
const boxes = document.getElementsByClassName('box');
const showClick = (e) => { event.target.dataset.clicked = 'true';}
for (let i = 0; i < boxes.length; i++) {
boxes[i].addEventListener('click', showClick, false);
}.box { display: inline-block; width: 100px; height: 100px; margin: 6px; background-color: rgb(255, 0, 0); cursor: pointer;}
.box::after { content: 'Click me!'; display: block; text-align: center; line-height: 100px; color: rgb(255, 255, 255); font-weight: bold;}
.box[data-clicked="true"] { color: rgb(255, 0, 0); background-color: rgb(255, 255, 0);}
.box[data-clicked="true"]::after { content: 'Clicked!'; color: rgb(255, 0, 0);}<div class="box" data-clicked="false"></div><div class="box" data-clicked="false"></div><div class="box" data-clicked="false"></div><div class="box" data-clicked="false"></div><div class="box" data-clicked="false"></div>how to pass className to svg in styled components
Issues
I think there are a couple of issues
import Close from './close.svg';isn't a valid react component- Unnest the class in the styled component
Solution
First create a proper SVG react component
const CloseIcon = ({ className, ...props }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
{...props}
className={className}
>
<path d="M13.627 12.213l9.9 9.9-1.414 1.414-9.9-9.9-9.9 9.9L.9 22.113l9.9-9.9-9.9-9.9L2.314.9l9.9 9.9 9.899-9.9 1.414 1.415-9.9 9.9z" />
</svg>
);
Second make modal-icon-close a top-level class in the styled component
const StyledCloseIcon = styled(CloseIcon)`
&.modal-icon-close {
width: 14px;
height: 24px;
fill: black;
top: 12px;
right: 14px;
}
`;
What doesn't make much sense to me is why internalize the classname and CSS and then require the correct classname prop to be passed anyway? You could simplify the component by also specifying the className prop using .attrs
const StyledCloseIcon = styled(CloseIcon).attrs(() => ({
className: 'modal-icon-close',
}))`
&.modal-icon-close {
width: 14px;
height: 24px;
fill: black;
top: 12px;
right: 14px;
}
`;
Or just simply eliminate the classname altogether
const StyledCloseIcon = styled(CloseIcon)`
width: 14px;
height: 24px;
fill: black;
top: 12px;
right: 14px;
`;
How to apply color to only part of a SVG icon with CSS?
If you split the svg into two paths you can select the second one and color just that using fill and CSS.
<style>
path:nth-child(2) {
fill: red;
}
</style>
<svg class="svgIcon---svg---3eBcz" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 1c.2 0 .38.12.46.3l3 7a.5.5 0 01-.92.4L9.81 7H6.2l-.73 1.7a.5.5 0 11-.92-.4l3-7A.5.5 0 018 1zM6.62 6h2.76L8 2.77 6.62 6z"></path>
<path d="M2 11.5c0-.83.67-1.5 1.5-1.5h9c.83 0 1.5.67 1.5 1.5v2c0 .83-.67 1.5-1.5 1.5h-9A1.5 1.5 0 012 13.5v-2z"></path></svg>Related Topics
Javafx Tab Fit Full Size of Header
CSS: Styling When Element Has Two Classes
Excluding First Element in CSS
What Actually Happens to CSS in High Contrast Mode
Can CSS: Not Selector Target: Before and: After Selectors
No CSS Transition for 'Height: Fit-Content'
CSS - Background Images Not Displaying Properly on Mobile Browsers
Selenium Webdriver CSS Selector Help - for Selecting Date
How to Create a Child Theme in Wordpress
Slow Down CSS Transitions/Animations into "Slow Motion"
Vertically Aligning Block Element to Image
Selenium How to Access Two Controls of Same CSS Class
Compile Less to Multiple CSS Files, Based on Variable Value
Primefaces Schedule Event Color Is Not Working After Replacing Primefaces Jar 3.3 by 4.0
Why Does The Img Tag Accept The Margin-Top Property
Change Background Colour as Page Scroll Without Jquery
Maintain Width and Height of Rotated Square Divs in CSS Grid (Responsive Solution)