Menu
I want to place some SVG images before some selected elements. I am using jQuery but that is irrelevant.
I would like to have the ::before element to be as:
#mydiv::before { content: '<svg ... code here</svg>'; display: block; width: 22px; height: 10px; margin: 10px 5px 0 10px; } If I do it as shown above, it just display the string. I checked the specs and there seems to be some restrictions on what content can be. Is there a work around to this restriction? Only CSS content is relevant to my question.
682
SVG content can be added using these pseudo-elements by following the methods described below: Method 1: Using the background-image property: The background-image property is used to set one or more background images to an element.
Using SVG as an <object> But, if you want the CSS stuff to work, you can't use an external stylesheet or <style> on the document, you need to use a <style> element inside the SVG file itself.
SVG images can be written directly into the HTML document using the <svg> </svg> tag. To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document.
::before (:before) In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
Yes you can! Just tested this and it works great, this is awesome! It still doesn't work with html, but it does with svg.
In my index.html I have:
<div id="test" style="content: url(test.svg); width: 200px; height: 200px;"></div> And my test.svg looks like this:
<svg xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3"/> </svg> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
