Loading an SVG into a page

Hello there,

What is the recommended way to load an SVG file into a page using Pro?

We would like to use this text effect on certain bits of text: https://codepen.io/alvarotrigo/pen/WNdeKQJ.

We are not sure if the SVG element should be added to a RAW HTML element in the page of the text being changed - or do we load it into the custom header?

Kind Regards,

Spencer

Kind Regards,

Spencer

Hey Spencer,

Thanks for reaching out!

To add the SVG path, you need to add it using the Raw Content element. You can check this thread as a reference.

Hope that helps.

Hi @marc_a,

That’s great, thank you.

I have added it here: https://leslieh7.sg-host.com/join-us-alt/

Please see the pink highlight effect indicated by the green arrow.

Do you know how I can create a loading delay?

At the moment it animates on hover - but we want it to load when the page loads and changing:

mark:hover > svg 

in our CSS to:

mark > svg

just breaks the animation, or it loads immediately and the animation is not visible.

Please see transition-delay: 1000ms; under svg - when hover is disabled this seems to be ignored.

svg {
	position: absolute;
	top: -10%;
	left: -10%;
	right: -10%;
	bottom: -10%;
	z-index: -1;
	overflow: hidden;
	margin: auto;
	padding: 0;
	width: 100%;
	height: 100%;
	fill: none;
	stroke-width: 54px;
	/* height from "svg" x 1.125 */
	stroke-dasharray: 400;
	stroke-dashoffset: 400;
	transition: stroke-dashoffset 400ms ease-in-out;
/* This transition does not work when hover is disabled */
/* transition-delay: 1000ms; */
	will-change: stroke-dashoffset;
	pointer-events: none;
}

mark:hover > svg {
	stroke-dashoffset: 0;
}

/* mark > svg {
	stroke-dashoffset: 0;
} */

I haven’t been able to find a delayed rile to apply directly to the SVG tag itself:

I realise this is probably all custom work so any advice you have would be greatly received.

Kind Regards,

Spencer

Hey Spencer,

The CSS selector mark > svg is the correct way to address your issue! Currently, the transition delay is set to 1000ms means it will load after 1 sec. That being said, by increasing the value of your transition delay, you can see the transition on the page load.

Hope that helps.

Hi @marc_a,

Thanks for getting back.

Do you know how I can load it once? The set up I have loads it multiple times.

It also seems to be expanding to cover the entire viewport, which is causing problems with the cookie consent plugin - you can’t click the buttons. See attached - it is behaving like an overlay.

I know I am asking a lot - I’m stuck as there isn’t any info out there that I can find for this problem.

Kind Regards,

Spencer

Hello Spencer,

The inline SVG is coming from the default WordPress, it was added since WordPress version 5.9. If you want to remove those inline SVG, you may check these articles.

Hope that helps.