Good morning.
I have an SVG that is made with a JQuery function and a CSS and would like to make it work in Wordpress.
I've tried the following:
SVG code between tags <div><svg></svg></div> , with the function just below added direct in the edit tab the HTML of the page, and CSS being added in the additional CSS section.
I also removed the function and the CSS to see how it was, and the result was the same, and the normal thing in my tests was that there was at least 1 slice of the drawing.
It's going like this:
Insteadofputtingthiscirclebetweencontent: 
I'mtryingtouseclassestodoboththeCSSandtheJQueryfunction,asIrealizedthataddingnormalCSS,whichIwastaught here , interferes with other template elements.
SVG (which I added exactly this way in the middle of the template): image / svg + xml
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:grey;fill-opacity:1;stroke:none;stroke-width:0.26458332"
x="140.74825"
y="268.02475"
id="texto9"><tspan
sodipodi:role="line"
id="texto99"
x="140.74825"
y="268.02475"
style="font-size:7.05555534px;stroke-width:0.26458332">9</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:grey;fill-opacity:1;stroke:none;stroke-width:0.26458332"
x="123.29855"
y="268.12485"
id="texto8"><tspan
sodipodi:role="line"
id="textssss8"
x="123.29855"
y="268.12485"
style="font-size:7.05555534px;stroke-width:0.26458332">8</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332; fill:grey;"
x="106.31586"
y="268.20859"
id="texto7"><tspan
sodipodi:role="line"
id="dddddd"
x="106.31586"
y="268.20859"
style="font-size:7.05555534px;stroke-width:0.26458332">7</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332; fill:grey;"
x="92.180901"
y="268.00748"
id="text6"><tspan
sodipodi:role="line"
id="texto235223526"
x="92.180901"
y="268.00748"
style="font-size:7.05555534px;stroke-width:0.26458332">6</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332;fill:grey;"
x="77.89962"
y="268.12991"
id="texto5"><tspan
sodipodi:role="line"
id="tspan23528"
x="77.89962"
y="268.12991"
style="font-size:7.05555534px;stroke-width:0.26458332">5</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332; fill:grey;"
x="62.054249"
y="268.04987"
id="texto4"><tspan
sodipodi:role="line"
id="tspan23532"
x="62.054249"
y="268.04987"
style="font-size:7.05555534px;stroke-width:0.26458332">4</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332; fill:grey;"
x="46.189892"
y="268.1373"
id="texto3"><tspan
sodipodi:role="line"
id="tspan23536"
x="46.189892"
y="268.1373"
style="font-size:7.05555534px;stroke-width:0.26458332">3</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332; fill:grey;"
x="31.437782"
y="268.08063"
id="texto2"><tspan
sodipodi:role="line"
id="tspan23540"
x="31.437782"
y="268.08063"
style="font-size:7.05555534px;stroke-width:0.26458332">2</text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332; fill:grey;"
x="18.192924"
y="268.38547"
id="texto1"><tspan
sodipodi:role="line"
id="asasassasassa"
x="18.192924"
y="268.38547"
style="font-size:7.05555534px;stroke-width:0.26458332">1</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:3.52777767px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332; fill:grey;"
x="150.51283"
y="267.90771"
id="texto10"><tspan
sodipodi:role="line"
id="asdasd"
x="150.51283"
y="267.90771"
style="font-size:7.05555534px;stroke-width:0.26458332">10</tspan></text>
</g>
</svg>
</div>
The JQuery function (which I tried to add right below svg, outside of its clear tag):
<script type="text/javascript">
(function($){
$(function(){
var graus = 36;
for(var x=1; x<10; x++){
var clone = $(".svge:eq(0)").clone(true, true);
clone.css({
transform: "rotate("+graus+"deg)"
});
$(".dive").append(clone);
graus += 36;
}
$("path").on("click", function(){
$(this)
.css("fill", "black")
.siblings("path")
.css("fill", "gray")
});
});
})(jQuery);
</script>
And finally the CSS, which I tried to put in the Additional CSS session of WordPress:
#slice1 , #slice2, #slice3, #slice4, #slice5, #slice6, #slice7, #slice8, #slice9, #slice10 {
stroke: black;
}
path {
fill: white;
stroke: black;
}
.dive{
position: absolute;
left: 600px;
top: 600px;
}
.svge{
position: absolute;
top: 0;
left: 0;
transform-origin: 3% 81%;
clip-path: polygon(3% 81%, 72% 21%, 100% 0%, 100% 0%, 100% 81%);
}
path:hover {
cursor: pointer;
}
The page's JQuery is working, I tested it in this question
EDIT: I found the following in the console, when I give F5 in the page:
Content security policy: Ignore '' insecure online '' within script-src: 'strict-dynamic' specified
Content security policy: Ignore "https:" within script-src: "strict-dynamic" specified
Content security policy: Ignore "http:" inside script-src: "strict-dynamic" specified
CSI / tbsd_ cb = gapi.loaded_0: 258: 127
CSI / _tbnd cb = gapi.loaded_0: 258: 127
Content Security Policy: How pages on the page relate to loading an inline resource ("script-src"). A CSP report is being sent. quick button
Content security policy: Ignore '' insecure online '' within script-src: 'strict-dynamic' specified
Content security policy: Ignore "https:" within script-src: "strict-dynamic" specified
Content security policy: Ignore "http:" inside script-src: "strict-dynamic" specified