What is the process for adjusting the attribute of a subitem utilized by the `use` element?

Currently, I am studying SVG and have a question about changing the circle fill value of the second use element. Here is what I have tried:

* {
stroke: brown;
stroke-width: 1;
fill: none;
}

.canvas{
border-color: green;
border-style: solid;
border-width: 1px;
}

.sun > circle{
fill: yellow;
}

.hot-sun > circle {
fill: red;
}
<?xml version='1.0'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/DTD/svg11.dtd'>
<?xml-stylesheet type='text/css' href='../css/index.css'?>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1400' height='1000' viewBox='0 0 1400 1000' class='canvas'>
<title>SVG learning</title>
<desc>This is my sandbox</desc>
<defs> 
<g id='foo' class='sun'>
<rect x='0' y='0' width='50' height='50'/>
<circle cx='25' cy='25' r='10'/>
</g>
</defs>
<g id='dwg'>
<use xlink:href='#foo' transform='translate(10 10)' />
    <!-- Here I expected my sun will be red...-->
<use xlink:href='#foo' transform='translate(10 70)' class='hot-sun'/>
</g>
</svg>

javascriptcsssvg

Answer №1

Sub-elements of a <use> element cannot be selected with CSS as they are not part of the DOM. However, CSS attributes for the <use> element itself can be inherited. This means that the styling of the <use> element will take precedence unless the referenced element inside the <defs> section is styled directly.

It's important to note that using a * { fill:...} rule could cause the styling to be applied to elements inside defs > #foo > circle, overriding the inheritance from the use element. This explains why the stroke color of the second sun remains brown instead of green as defined in the rule.

* {
stroke: brown;
stroke-width: 1;
}

#foo rect {
fill: none;
}

.canvas {
border-color: green;
border-style: solid;
border-width: 1px;
}

use {
fill: yellow;
}

.hot-sun {
fill: red;
stroke: green
}
<?xml version='1.0'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/DTD/svg11.dtd'>
<?xml-stylesheet type='text/css' href='../css/index.css'?>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1400' height='1000' viewBox='0 0 1400 1000' class='canvas'>
<title>SVG learning</title>
<desc>This is my sandbox</desc>
<defs> 
<g id='foo' class='sun'>
<rect x='0' y='0' width='50' height='50'/>
<circle cx='25' cy='25' r='10'/>
</g>
</defs>
<g id='dwg'>
<use xlink:href='#foo' transform='translate(10 10)' />
    <!-- Here I expected my sun will be red...-->
<use xlink:href='#foo' transform='translate(10 70)' class='hot-sun'/>
</g>
</svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In need of changing the date format post splitting

I need help converting a date from MM/DD/YY to YYYYMMDD The current code I have is giving me an incorrect output of 2211. How can I implement a check on the Month and Day values to add a leading zero when necessary? var arr = '1/1/22'; arr = NTE ...

javascript

Guide to customizing the default scrollbar colors in Nextjs

When browsing websites like tailwindcss.com or https://developer.mozilla.org/ in Chrome and Firefox, you may have noticed that they utilize the default scrollbar style but allow users to change its colors through a dark/light mode button. The appearance of ...

javascriptreactjsnext.jsscrollbar

Google Extension PHP Plugin

Is it feasible to integrate a PHP file into a Google Extension for Chrome? I've been exploring the idea of creating an extension and most resources only mention HTML, CSS, and JavaScript. Any guidance on using PHP in the extension would be highly valu ...

phpjavascripthtmlcssgoogle-chrome-extension

Adjusting the height of a div according to the changing heights of other divs

The sidebar contains a search field, two lists, and a text div. The height of the search field and text div always remains constant, while the heights of the two lists vary dynamically. I am exploring the possibility of using only CSS to make the height o ...

htmlcss

Can you explain how to use a toggle switch to make a select dropdown select a random option?

Currently, I am in the process of setting up a page for a character generator. Users will have the option to randomize traits or input their own. The interface includes toggle switches for the "choice vs random" options for each trait category, as well as ...

javascriptjqueryselectrandomdrop-down-menu

How can I stop the body from scrolling to 100% height when the virtual keyboard is displayed?

My chat app has sticky header and footer elements. To handle the mobile virtual keyboard opening, I adjust the document's height using window.visualViewport.height. For example, if the browser's height is 1000px and the virtual keyboard takes up ...

javascriptcssweb-applicationssticky-footerintersection-observer

Arranging divs using the float property

I am currently working on a Django project where I have a large list of dictionaries in the view: 'description': [ { 'name': 'Parts', 'good': ['Engine', 'Transmission&a ...

htmldjangocssdjango-templates

Splitting JavaScript files in the "dist" folder based on their source folders can be achieved in Angular by using G

I’m currently utilizing gulp-angular for my project, but I’m facing a challenge due to my limited experience with node and gulp when it comes to modifying the default scripts task. My goal is to generate an optimized JS file for each folder within my ...

javascriptangularjsnode.jsgulp

Conceal the information beneath a see-through fixed navigation bar when scrolling downward

the issue: I am facing a challenge with my transparent fixed navbar that has a margin-top gap. The content below the navbar needs to be positioned under it while scrolling down, but the background of the page is a dynamic slideshow of various images. This ...

javascriptjqueryhtmlcsstwitter-bootstrap

Simultaneously iterate through two recursive arrays (each containing another array) using JavaScript

I have two sets of arrays composed of objects, each of which may contain another set of arrays. How can I efficiently iterate through both arrays and compare them? interface items { name:string; subItems:items[]; value:string; } Array A=['parent1&ap ...

javascriptarraystypescriptloopsrecursion

Execute an ajax function when a form is submitted on Marketo

My Request I am seeking assistance with integrating a Marketo script in a WordPress plugin. Upon submission of the Marketo form, I need to perform calculations using the form elements and display the results on the page. Please provide suggestions on ho ...

javascriptjqueryajaxwordpressmarketo

Having trouble accessing object properties fetched via API, receiving the error message "TypeError: Cannot read property '' of undefined" in Next.js with JavaScript

Encountering a unique issue specific to NextJs. Fetching data from an API using a custom hook and receiving an array of objects as the result. Successfully logging the entire result (array of objects). const myMovieGenreObjects = useFetchNavBarCategories( ...

javascriptreactjsarraysapinext.js

Bot on Discord engaging in a gaming session

I recently developed a Discord bot with the status of ""playing a game"" and here is the code that I implemented: bot.on('ready', () => { console.log('Client is online!'); bot.user.setActivity('osu!'); Th ...

javascriptnode.jsnpmdiscorddiscord.js

Extract information from a webpage using Selenium WebDriver

Currently, I am working on mastering Selenium, but I have hit a roadblock that I need assistance with. My task is to gather all the betting information for games from the following link and store it into an array. Given my limited experience with HTML an ...

javascriptseleniumselenium-webdriverautomated-tests

Position flex-box items to align with the baseline of the final line of text within a block

I am attempting to replicate the layout shown in the final example of the image linked below using flexbox. https://i.sstatic.net/KSaig.png It seems that the align-items: baseline; property works perfectly when the blocks contain only one line of text. ...

cssflexboxbaseline

What causes certain properties of html and body elements to behave in this way?

I'm on a quest for understanding some mysteries. First riddle: Why does the body have a mysterious margin-top? html { height: 100%; background-color: red; } body { height: 100%; margin: 0; background-color: yellow; } <h1>Hello P ...

htmlcss

What could be causing certain values within my array to appear as undefined?

Within my PHP code, I have a for loop that generates a series of checkboxes on the page with a specific format <input type="checkbox" name="checkbox[]"> My goal is to utilize JavaScript to identify which checkboxes are checked and store their value ...

javascriptphparraysundefined

Unidentified properties in mongoose query

Currently, I am utilizing MongoDB and Mongoose along with TypeScript. I have encountered an issue with the following scenario: Here is the model definition I have created: export default conn.model<AdminInterface & Document>('Admin', a ...

javascriptmongodbtypescriptmongoose

When you click on a list of links, a stylish image gallery will appear using fancybox

Can anyone lend a hand with this? I would greatly appreciate any assistance CSS <a id="fancybox" href="javascript:;">Gallery 1</a> <br /> <a id="fancybox" href="javascript:;">Gallery 2</a> <br /> <a id="fancybox" hr ...

phpjavascriptjqueryfancybox

Setting up button value dynamically according to dropdown selection in Angular 2

I'm a beginner in angular 2 and I have a button with a dropdown. When I select an option from the dropdown, I want its value to be displayed on the button. The CSS code for styling the dropdown is provided below: .common_select_box { width: 100%; } ...

htmlcssangular