I have an SVG file containing two different paths.
<path d="M 84.4 53.2 C 75.3 50.1 67.1 48.5 59.6 48.3 C 51.2 48 45.2 47.5 41.5 46.5 C 35.7 45.1 29.9 42.4 23.9 38.4 C 21.6 36.9 19.4 35.2 17.3 33.2 C 19.4 34.2 21.6 35 23.9 35.6 C 27.3 36.5 34.1 37 44.1 37.2 C 53.7 37.3 59.7 37.7 62 38.3 C 70.4 40.3 77...
<p>Can I apply CSS to fill each path individually?</p>
<p>This code fills the entire SVG:</p>
<pre><code>.svg-fill {
fill: red
}
How can I target and fill each path separately?
Utilize the nth-child selector in the following way:
svg path:nth-child(1) { /*OR svg path:first-child OR svg path:nth-of-type(1)*/
fill:red;
}
svg path:nth-child(2) { /*OR svg path:last-child OR svg path:nth-of-type(2)*/
fill:green;
}<svg>
<path d="M 84.4 53.2 C 75.3 50.1 67.1 48.5 59.6 48.3 C 51.2 48 45.2 47.5 41.5 46.5 C 35.7 45.1 29.9 42.4 23.9 38.4 C 21.6 36.9 19.4 35.2 17.3 33.2 C 19.4 34.2 21.6 35 23.9 35.6 C 27.3 36.5 34.1 37 44.1 37.2 C 53.7 37.3 59.7 37.7 62 38.3 C 70.4 40.3 77 44.2 81.8 49.9 C 82.9 51 83.7 52 84.4 53.2 Z"/>
<path d="M 68.1 7.3 C 79.5 10.1 86.8 16 89.9 24.9 C 91.4 29.2 91.4 36.1 89.8 45.7 C 89.9 45.8 90 46 90.1 46.2 L 90 46 C 90.4 46.7 90.8 47.4 91.2 48.2 C 93.2 52 94.4 56.2 95 60.7 C 95.1 61.3 95 61.8 94.6 62.3 C 94.2 62.7 93.8 63 93.2 63.1 C 92.7 63.2 92.1 63 91.6 62.7 C 91.2 62.3 90.9 61.9 90.8 61.3 C 90.3 57.3 89.2 53.6 87.5 50.2 C 86.8 49.1 86 48.1 85.1 47.1 C 79.7 40.8 72.4 36.5 63.1 34.2 L 63.2 34.3 C 60.8 33.607 54.5 33.599 44.3 33.1 C 34.709 32.63 28.3 32.4 25.1 31.6 L 25 31.6 C 18.9 30.1 14.1 26.9 10.6 22 C 10.2 21.4 9.8 20.7 9.5 20.1 C 9.5 20.1 9.5 20 9.4 20 C 9.3 19.8 9.2 19.6 9 19.3 C 6.6 15.3 5.3 10.8 5 6.1 C 7.4 8.5 10.3 10.1 13.5 10.9 C 17.7 11.9 22.3 12.1 27.3 11.5 C 30.2 11.2 34.7 10.4 40.6 9 C 46.4 7.5 50.9 6.6 54 6.4 C 59 5.8 63.7 6.1 68.1 7.3 Z" />
</svg>Each of your pathways has the same designated class (at the conclusion of each path, it is clearly identified with class="st0" in the code). By adjusting the class to create distinct identifications, you can specifically address each one.
For instance, alter the second pathway to class="st1" and subsequently apply the following CSS to render the 1st path red and the 2nd path blue:
.st0 { fill: red; }
.st1 { fill: blue; }
If you prefer to modify them through CSS, remember to eliminate the inline color style from each path by removing style="fill: rgb(xx, xx, xx);".
I am encountering an issue with populating a gridView using the ExecuteReader function in my program. Every time I run it, I receive an error message stating "ExecuteReader : CommandText property has not been initialized". aspx.cs private void LoadGr ...
Looking to implement a nested grid within a parent grid in Bootstrap 3.3.7. Check out the HTML below: Parent component <div> <div class="row"> <div class="col-md-3 border">.col-md-3</div> // <div class="col-md-9 ...
I've been tackling the challenge of making iframes responsive within a div element, but I've hit a roadblock. While there are plenty of solutions available online, none seem to work seamlessly when dealing with YouTube video embeds. Currently, m ...
I have multiple sibling divs that are styled with position: fixed; display: table; top: 0; left: 0; width: 100%; height: 100%;. These divs act as message boxes and are created by a third-party ASP.NET control, preventing me from altering their order in t ...
I'm having trouble changing the color of my navbar to blue in certain parts. I've tried using background: lightblue;, but for some reason, two sections remain white. How can I make them completely blue? (see screenshot below) Any help would be ap ...
I need help with a Bootstrap modal in my project that has a close button positioned at the top right corner. I've used CSS to position the button, but it's not staying in one place consistently despite applying absolute positioning. I've tri ...
Is there a way to create an image background with triangle shapes by combining small triangles together? I am interested in making this collection of triangle image backgrounds. Can someone guide me on how to do it?! .block { width: 0; height: ...
Hey there! I'm currently working on adding some spinning text, similar to a carousel, using keyframes in my React app. The setup involves MUI v5 with @emotion. Basically, I want a "box" element to show different words every few seconds with a rotating ...
After implementing the code, here is the current output: <table><tr> <td><div id="adt"></div></td> <!-- 336x280 ad code --> <td id="butw"><div id="butto">Follow @Twitter</div></td> ...
After scouring the internet, I stumbled upon numerous dimensions referred to as proper for developing responsive designs. However, I am specifically interested in identifying the ideal breakpoints, particularly for mobile devices with small screens like ...
My button's CSS includes background: -moz-linear-gradient(center top, #59a1d8, #27247D) repeat scroll 0 0 #0f78c7;, which works well in Mozilla Firefox. However, it does not display properly in the Chrome browser. Can someone suggest an equivalent cod ...
I am facing a challenge with my HTML code and styling, which is just an example: <div id="mn" style="margin-top:200px;"> <div class="first">1</div> <div class="second">2</div> & ...
My website logo is displaying incorrectly in Opera, despite working fine in Firefox and Chromium. I've been trying to troubleshoot this issue for the past few hours with no success. The ID of the logo element is 'Logo'. You can view the sit ...
Struggling to center an image for mobile devices, I have successfully done so for tablets and regular desktop devices. However, I am facing challenges in editing the code to ensure full responsiveness for mobile devices. Additionally, there is excess white ...
Hey everyone, I recently attempted to create a form for the first time but ran into an issue with the writable area not starting at the beginning. I suspect it has something to do with the padding, but being new to this environment, I'm having trouble ...
I'm struggling with resizing an image within a div using the em size unit. I want the image to be half the size of its parent div, so I set both the width and height CSS properties of the image to 0.5em. However, when looking at the code below, you c ...
My goal is to incorporate a background video for VH1 and VH2 that remains fixed but stops at VH3. When a user opens the page, they will see #VH1 and the #videoBG as a background video. As they continue scrolling, they will reach #VH2 without the backgrou ...
Check out this fiddle link: http://jsfiddle.net/Wss5A/72/ Focusing on the following: 2-A-1 2-A-2 2-A-3 The third-tier menu is currently displayed starting from the top left corner. I want the first submenu element to be aligned with either 2-A-1, 2-A- ...
How can I remove the white spaces on the right and left side of a section when applying a background-color? https://i.sstatic.net/WbVuv.png I want the background-color to fill out the entire width of the section. Should I use extra padding to solve this ...
One of the challenges I encountered was styling a Button component from MUI: export const ButtonStyle = styled((props) => <Button {...props} />)(({ theme }) => ({ marginTop: 8, marginBottom: 8, width: 'auto', borderRad ...