Is it possible to include an element id in a CSS URL request?

Question

Is it possible to include an element id in a CSS URL request?

I have an SVG file containing a series of <symbol> elements, each with unique ids. What I am trying to achieve is to use the background-image property in an HTML file to set the element with the id I choose, like this:

background-image: url(“sprite.svg#symbol_1”);

This syntax works as "src" in an <img> or as "href" in a <use> , but for some reason, I cannot get it to work in CSS. If I place the symbols in a <defs> container and then set a <use> element in the SVG file, the symbol displays when I remove the "#symbol_1", but then I lose the ability to change it.

html css svg

Answer 1

Answer №1

I recently managed to figure this out with the help of a useful link shared by @enxaneta. The link provided detailed instructions on how to achieve this, but here's a simplified version. By adding a style block like the following in your svg file:

<style>
  g {display: none;}
  g:target {display: inline;}
</style>

You can easily group the components of each image (paths, shapes, etc), assign an id to the group, and set the root svg element to the viewport size. Then, you can use the id reference for the group in your css.

The most challenging part for me was ensuring that all images fit within a single viewport, as Inkscape sometimes generates path commands randomly as relative or absolute. However, I ended up converting all paths to "d" values for path classes in the style block and removing any unnecessary transforms, which significantly reduced the file size by approximately 40%.

Answer 2

I recently managed to figure this out with the help of a useful link shared by @enxaneta. The link provided detailed instructions on how to achieve this, but here's a simplified version. By adding a style block like the following in your svg file:

<style>
  g {display: none;}
  g:target {display: inline;}
</style>

You can easily group the components of each image (paths, shapes, etc), assign an id to the group, and set the root svg element to the viewport size. Then, you can use the id reference for the group in your css.

The most challenging part for me was ensuring that all images fit within a single viewport, as Inkscape sometimes generates path commands randomly as relative or absolute. However, I ended up converting all paths to "d" values for path classes in the style block and removing any unnecessary transforms, which significantly reduced the file size by approximately 40%.

Is it possible to include an element id in a CSS URL request?

Answer №1

Similar questions

Emphasize sections of text within a chart

Use Vue.js to shorten the number of decimal places and include commas in numerical values

A workaround for background-size in Internet Explorer 7

The submission of the HTML Form is experiencing difficulties in Internet Explorer 9

I've got some .html files stored on GitHub and I want to open them in Sublime Text 3. How can I achieve this? Could you please provide me with a detailed, step-by-step guide

Bootstrap - the ability to resize elements dynamically

Interactive button with jQuery that toggles between clicked and unclicked states, automatically reverting to unclicked when clicked elsewhere on the page

The art of linking JavaScript events

When the browser screen is minimized, the menu bar toggler in my Angular project stops functioning properly. I rely on Bootstrap features within Angular to handle this

Unable to cycle through an array of objects in JavaScript. Only receiving output for the initial element

Using CSS nth-child to create a two-column checkers layout

Executing a JavaScript function using document.write()

How can you prevent PHP from continuing execution after receiving a false return value in Javascript?

What methods can be used to prevent divs from overlapping when the window size is reduced?

Is it possible to implement addEventListener.delay() functionality?

Is it beneficial to modify the title/alt attribute of an image for SEO purposes?

Stopping an endless loop in JavaScript by pressing a key on the keyboard can be a useful

Combining Bootstrap Vue: utilizing class names alongside HTML tags

Both the attributes `name="button"` and `name="submit" are functioning correctly within the form

Stylish CSS: Jagged 3-dimensional rotated text