Develop Reference

Wordpress Stripping SVG Path Code in Footer

Im having issues trying to insert svg path code into the footer of my website using the Wordpress Customizer menu. It seems Wordpress is stripping the code from:
<div class="wcpay-connect-account-page-payment-methods"><svg width="51" height="35" viewBox="0 0 51 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="50" height="34" rx="3.5" fill="white" stroke="#F3F3F3"></rect>
<path d="path...." fill="#15195A"></path>
<path d="path...." fill="#15195A"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="path...." fill="#15195A"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="path...." fill="#15195A"></path>
to:
<div class="wcpay-connect-account-page-payment-methods"></div>
Theme: Oceanwp-3.1.2
SVG Paths do load within main page content just not in the footer.
I have tried looking around for different code snippets to add into my functions file to disable the stripping of SVG tags but none seem to have worked.
Does anyone have an idea on how I could enable SVG path codes/stop them from being stripped within my footer?

SVG is not render on IOS (render empty space)

I check my site in browserstack and on same IOS or MacOs device in
different times SVG can work or can render empty space
//SVG USAGE
<svg>
<use xlinkHref={`#${id}`} />
</svg>
//SVG
<svg
onClick={onClick}
className="top-controls-panel__icon top-controls-panel__icon--points"
x="0px"
y="0px"
viewBox="0 0 47.1 12.1"
xmlSpace="preserve"
data-ieadjustwidth="40%"
>
<path d="M0.4,6.1c0,3.1,2.5,5.6,5.6,5.6s5.6-2.5,5.6-5.6S9.1,0.5,6,0.5S0.4,3,0.4,6.1" />
<path d="M17.4,6.1c0,3.1,2.5,5.6,5.6,5.6s5.6-2.5,5.6-5.6c0,0,0,0,0,0c0-3.1-2.5-5.6-5.6-5.6S17.4,3,17.4,6.1L17.4,6.1" />
<path d="M35.4,6.1c0,3.1,2.5,5.6,5.6,5.6c3.1,0,5.6-2.5,5.6-5.6S44.1,0.5,41,0.5C37.9,0.5,35.4,3,35.4,6.1L35.4,6.1" />
</svg>
I use JavaScript and React, problem that sometimes on IOS or MacOS
an empty space is rendered instead of svg.
I dont have apple device and testing site on browserStack service
In other questions I found that size of SVG can influence for that SVG is not render, but I dont undestand how that sizes should calculate, if sizes indicated in CSS in percent?
Also I change <use href... to <use xlinkHref... it is not work for me.
Now I won't try use
img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src='your-alternative-image.png'"
instead of SVG, or I should use another variant?

Keeping parts of an SVG at fixed size

Essentially I needed to make the center "cut-out" keep a fixed shape and size regardless of vector scale. Is there a way to achieve this?
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none" style="fill-rule:evenodd;" viewBox="0 0 2802 2657">
<path d="M290 4c-95,733 -191,1466 -286,2200 760,150 1520,300 2279,450 172,-223 343,-446 515,-669 -114,-572 -229,-1144 -343,-1716 -722,-88 -1444,-176 -2165,-264zm696 1027c-103,111 -205,222 -308,333 94,111 188,222 282,333 342,-205 684,-410 1026,-616 -333,-17 -667,-34 -1000,-51z"/>
</svg>

So I managed to do something after some editing to your SVG.
To achieve what you're asking you'll need to use / have :
- the SVG mask attribute
- A very large shape for the mask ( as much large as the max scale you want to use on the visible shape )
- The shape that you want to resize
- Resize the shape with transforms
Your SVG should looks like the following
<svg>
<defs>
<mask id="theMask">
<path fill="#ffffff" d=""/>
</mask>
</defs>
<g mask="url(#theMask)">
<path fill="#ffffff" id="shapetoresize" d=""/>
</g>
</svg>
I posted a pen as a "Proof of concept"
Feel free to fork it and use it to achieve what you're trying to do.
Codepen
note: as pointed out by #thioutp , The JS is only for demo purposes, you don't need GSAP to achieve this.

accessing inline SVG elements with javascript

I'm playing around with SVG and I've hit a wall.
what im trying to do it when you hover over on svg element it will cause another to appear.
my idea was using javascript to add and remove a "hidden" class when you hover, but its not working, it works on none SVG elements but I can't see why it's not working here.
<svg xmlns:cc="http://web.resource.org/cc/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
width="400px"
height="400px"
viewBox="0 150 960 900">
<path id="loc36" class="maploc" d="m 352.28954,738.20354 0,140.66609 85.8653,0 0,-140.41399 z"/>
<path id="info36" class="infopanel " d="m 306.42857,896.64787 0,157.85713 539.28572,0 0,-158.57141 z"/>
</svg>
Javascript
$("#loc36").hover(function(){
$('#info36').removeClass('hidden');
},function(){
$('#info36').addClass('hidden');
});
https://jsfiddle.net/atprsteq/
Its works on none SVG elements, like this example
http://jsfiddle.net/EzfwV/210/
Am I just missing something simple here?

Am I just missing something simple here?
Yes.
You forgot to include jQuery!
Select jQuery from the "Frameworks & Extensions" menu.

How to extend the text along the entire textPath in SVG

How do I make the text on a path (see screenshot) extend so that it follows the entire textPath?
I have tried using the method attribute value stretch but it doesn't work like I expect - it doesn't stretch the text along the path.
Is there a way to make this work in all browsers?

The way to spread out the text over the entire textPath is to use the textLength attribute. Also see this other question for how to compute a good value for textLength. Here's how to do it:
<svg viewBox="0 0 500 300" version="1.1">
<defs>
<path id="s3" d="M 10,90 Q 100,15 200,70" />
</defs>
<text font-size="20">
<textPath xlink:href="#s3" textLength="205">
Short text
</textPath>
</text>
<use xlink:href="#s3" fill="none" stroke="black" stroke-width="1"/>
</svg>
Viewable example: http://jsfiddle.net/zkZ2n/
Here's the bugreport for Firefox not supporting textLength: https://bugzilla.mozilla.org/show_bug.cgi?id=569722