SVG Anchor Tag PHP Function Animation Transition Madness

[bmoneruiux]

Who knew simple swapping code would be so hard…

Alright so I’ve wiped out some of the theme developers original code in the header, and replaced it with a custom SVG graphic. I had a problem with the SVG fill color not wanting to animate due to http:// being used in the anchor link is resided in.

No problem. Removed the hyperlink and then placed one directly inside of the SVG code with no `http://’, so no more php hook calling…or so I thought…

Now for some godforsaken reason, this B!+¢# is doubling up the home URL. I thought I was going crazy at first, but I’ve checked it many times.

If their <?php echo home_url( '/' ); ?> remains in the href spot, the URL is just fine. However if I place an exact URL in there, it doubles it up so it looks like “mysite.ext/mysite.ext”.

This whole headache just because an SVG animated graphic doesn’t like to be in an anchor tag with http:// appended to it.

EDIT: Forgot to add the link to my site.

I’m using the “Responsive” theme for WordPress, btw.

[chrisburton]

Now for some godforsaken reason, this B!+¢# is doubling up the home URL.

Sounds like a problem with your settings. Are you using any S-E-O. plugins?

First, why not just use <?php echo home_url(); ?>? What’s the purpose of adding in an exact URL inside the PHP class if it does what it’s supposed to in the first place?

Also, try appending the http:// so we can see the problem.

[chrisburton]

Now for some godforsaken reason, this B!+¢# is doubling up the home URL.

Sounds like a problem with your settings. Are you using any plugins (Yoast or any search engine optimization)?

First, why not just use <?php echo home_url(); ?>? What’s the purpose of adding in an exact URL inside the PHP class if it does what it’s supposed to in the first place?

Also, try appending the http:// so we can see the problem.

[chrisburton]

You can’t write S-E-O as it will flag your post.

[bmoneruiux]

@chrisburton

Here’s a link to another post on here where someone is having the exact same problem as far as the transition not liking http://.

When I use <?php echo home_url(); ?>, that automatically appends http://to the URL. And, as outlined above, http://doesn’t let the fill color of an SVG graphic transition. It just makes the color turn on and off. So physically typing in the URL without the http:// is the only way to get it to cooperate and transition like a good girl.

However once <?php echo home_url(); ?> is removed, the link then turns to http://brandonmoner.me/brandonmoner.me on the live site. Which will then result in a 404 error because that’s not a page.

Be aware…the odd fill transition behavior is only happening in Chrome and Safari. FireFox seems to have no issue. However that doubled up URL is happening in all when I replace <?php echo home_url(); ?>.

And yes I am using WP EssYeeOh, however I don’t have anything special in there as of yet. And I doubt that thing can control my home linking logo URL. And, no, no caching plugins.

[chrisburton]

And yes I am using WP EssYeeOh, however I don’t have anything special in there as of yet. And I doubt that thing can control my home linking logo URL. And, no, no caching plugins.

Think again. I had the same issue before. You may even be able to find my post from a few year ago concerning that very issue. Disable the S-E-O plugin and see if that solves it.

[bmoneruiux]

Ok. Deactivated it. Didn’t solve it :(

EDIT: I’ve been diving into their core folder to see if there are any hooks doing something funky, but so far I can’t find anything. But then again I’m not a master php coder, so there’s something I’m probably not looking for.

[chrisburton]

What are your permalinks set at? According to the WP documentation, home_url() should just spit out the homepage URL in full (http://example.com).

Might be easier if you dump your code.

[bmoneruiux]

My permalinks are set to /%postname%/. All of that is apart of my WP Maintenance 101 Checklist lol.

The Responsive theme is in the WordPress Repository and is free. All I did was create a child theme and start to alter stuff in the header and footer only first. You can download it and look at their header.php file to get a look at their coding.

The only code I’ve added to the header.php file was:

         <div id="logo">
                <svg class="bm-logo" version="1.1" id="Layer_1" x="0px" y="0px" width="128px" height="128px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
                    <a xlink:href="brandonmoner.me">
                      <rect class="logo-bg" fill="#404040" width="128" height="128"/>
                      <path class="logo-square" fill="#404040" stroke="#FFFFFF" stroke-width="8" stroke-miterlimit="10" d="M9.28,9.28v109.44h109.44V9.28H9.28z"/>
                      <g>
                        <path fill="#FFFFFF" d="M45,81.104h17.352c6.399,0,10.6,2.899,10.6,8.852c0,3.6-1.851,6.199-5.101,7.6v0.1
                                                c4.351,0.951,6.7,4.352,6.7,9.201c0,5.602-3.899,9.951-13.151,9.951H45V81.104z M51.25,96.053h10.201c3,0,5.25-1.75,5.25-4.949
                                                c0-3.601-1.85-4.899-5.25-4.899H51.25V96.053z M51.25,111.705h11.051c3.801,0,6-2.051,6-5.65c0-3.5-2.199-5.5-6-5.5H51.25V111.705z
                                                "/>
                        <path fill="#FFFFFF" d="M79.4,90.954h5.4v3.599h0.15c1.7-2.55,3.851-4.3,7.95-4.3c3.149,0,6.101,1.351,7.25,4.3
                                                c1.899-2.648,4.351-4.3,8.102-4.3c5.451,0,8.65,2.399,8.65,8.701v17.851h-5.699v-15.101c0-4.101-0.25-6.951-4.701-6.951
                                                c-3.852,0-5.501,2.552-5.501,6.899v15.152h-5.7v-16.602c0-3.551-1.1-5.451-4.55-5.451c-2.95,0-5.649,2.4-5.649,6.701v15.352H79.4
                                                V90.954L79.4,90.954z"/>
                      </g>
                    </a>
                </svg>
            </div><!-- end of #logo -->

And if you take a look at their header.php, you can see exactly where I placed this code.

[chrisburton]

What I’m saying is do this:

<a xlink:href="<?php echo home_url(); ?>">

This should work for you as I tested it myself. Proof: http://cl.ly/VS1S

[bmoneruiux]

Wow. That didn’t happen when I did it. But once second. I’ll try again.

[bmoneruiux]

Ok tried this:

<div id="logo">
    <a xlink:href="<?php echo home_url(); ?>">
        <svg>
            ...
        </svg>
    </a>
</div><!-- end of #logo -->

And although the animation works, the logo is no longer hyperlinked.

EDIT: Dammit….wait. I might be an idiot…

EDIT pt2: Ok so I forgot to place the anchor inside of the svg tag, however I was right. When I tried it this way last time, the link came back…but now the transition of the svg background isn’t smooth again.

[chrisburton]

That’s probably due to your CSS.

[bmoneruiux]

Nope. The transition works fine in my CodePen project, and works fine when I type in an absolute URL. But when the URL is fed in via that echo, it appends http:// to the URL and then the fill transition doesn’t work.

The animation of the SVG fill seems to have an issue with http:// on Chrome and Safari.

But if I type in the absolute URL of my site without the http://, something in the PHP code file is targeting that anchor and placing “>… on it before my absolute URL entry, and it’s causing my link to then turn into http://brandonmoner.me/brandonmoner.me.

I wonder if:
jQuery('element').animate({ fill: '#B565A7'}, 350);
Would work…

[chrisburton]

You may have to use jQuery then. It could be a bug. I’ll ask Lea Verou.

[Author]

Posts