Css, before: and svg

[FrD]

Hi,

I'm trying to use an svg element directly as an image in a before: pseudoclass.

The code below works in an html page, but not in a tiddler. I can't see why.

The image inside the url is just the same red circle that is drawn below.

Any hint ?

<style>
.square{
   background-color: Lightgreen;
   width: 100px;
   height: 100px;
}

.square:before{
   display: block;
   content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100' width='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red' /></svg>");
   background-size: 28px 28px;
   height: 28px;
   width: 28px;
}
</style>
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>


<div class="square"></div>

Thanks

Regards

FrD

[c pa]

OK, when I paste your code into a new tiddler on TiddlyWiki.com I get a red circle followed by a green square.

If I take the style and put it in a tiddler tagged "$:/tags/Stylesheet. I get a red circle followed by a green square.

Same thing with the code in a web page. So I'm not sure what you're looking for

[FrD]

Hi c pa,

On a web page, I get a red circle an below a red circle inside a green square.

In a tiddler I get a red circle and below a green square, with not circle inside.

Regards

FrD

Le samedi 11 août 2018 22:15:22 UTC+2, c pa a écrit :

[PMario]

Hi FrD,

Move the style element into a tiddler tagged: $:/tags/Stylesheet    AND

use type: text/css

Then it works.

-m

[FrD]

Hi PMario,

Thanks it works indeed.

My next step was to be able to use a transclusion (for instance {{$:/core/images/left-arrow}}) instead of an svg tag. And the type  text/css does not help !

Do you know how it could work ?

Thanks

Regards

FrD

[c pa]

The problem is probably in the number of quote marks. If there are "" in the svg then you have to surround them with 3 quotes.

Also the code for the SVG is part of a longer string so you have to set a variable to the contents of the svg and then insert that variable in the text using substitution like this:

\define svgbeforeclass()

.square:before{
   display: block;
   content: url("data:image/svg+xml;charset=UTF-8,$(svgcode)$");


   background-size: 28px 28px;
   height: 28px;
   width: 28px;
}

\end


<$set name=svgcode tiddler="svgTiddler" field="text" >

<<svgbeforeclass>>

</$set>

[FrD]

Hi c pa,

Thanks for the reply.

I've tried your way but I couldn't make it work.

Have you tried on https://tiddlywiki.com/

Regards

FrD