The behavior of the link surrounding the svg element is odd

Incorporating SVG icons into my website brought me to this script: https://github.com/tiagoporto/jquery-svg-to-inline

The script worked perfectly.

To display the icon properly, I enclosed it in an <a> tag:

<a href="https://open.spotify.com/" target="_blank" class="svg-link"><img src="<?php bloginfo('template_url');?>/svg/play-white.svg"  class="svg"></a>

However, this setup resulted in a visual issue. When inspected with Firebug, I noticed overlapping elements highlighted by <svg></svg>.

The gray area was set to a height of 60px, matching the size of the SVG. Despite no margin or padding, the orange part extended above the gray section. One solution I considered was applying overflow:hidden to the gray div, but I am curious if there is a more elegant approach to limit the link's size to match that of the SVG itself.

Your insights and suggestions are greatly appreciated!

javascriptjqueryhtmlcsssvg

Answer №1

Below is the example I have been working on:

<div class="col-md-2 col-sm-3 svg-link-wrapper">
   <a href="#musik" class="svg-link"><img src="icon.svg"  class="svg"></a>
</div>

.svg-link {
  display: inline-block;
  height: 60px;
}

.svg-link-wrapper {
    text-align: right;
    height: 60px;
 }

Answer №2

After some research, I discovered an even more efficient solution! Simply apply a Background-Image in SVG format to the <a> tag, specify height and width, and you're good to go!

a .svg-link { 
    background-image: url(./svg/music.svg);
    height: 45px;
    width: 45px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Clicking on a card will cause it to expand

Exploring Material-UI-React for the first time to create expanding cards, I've encountered an issue where all cards expand when one is clicked. How can I modify my code so that only the clicked card expands without affecting the others? const useSt ...

javascriptreactjscomponentsmaterial-ui

Rails not receiving JSON data

I am attempting a straightforward ajax call in Rails 4, but encountering issues with retrieving the json response. Below is the script I'm working with: $(document).on "submit", "form[name=upvote-form]", -> form = $(this) $.post "/vote", $(th ...

javascriptruby-on-railsajaxjsonruby-on-rails-4

Ways to prevent Deno Workers from using cached source code

Good day, I am currently working on building a custom javascript code execution platform using Deno Workers. Additionally, I have implemented an Oak web server to manage requests for script modifications and their compilation and execution. An issue arise ...

javascripttypescriptworkerdeno

Displaying Google Street View and Google Maps with marker points in a parallel arrangement

Is there a way to align the Street View window with marker points from Google Maps? Here is the code that needs attention: <div id="property_map"></div> <script> /* Code for Google Map */ func ...

javascriptphpgoogle-mapsgoogle-maps-api-3

Regular expressions in Python do not function properly on text data

In my HTML file, I am using lxml and BeautifulSoup to convert it to text. However, I am encountering a problem with ill-formed HTML that I want to remove. I attempted to use a regular expression to match the problematic string, but it did not work as expec ...

pythonhtml

Having trouble finding the text input element with Selenium and Python while working on Confluence

I'm having trouble clicking inside the text area on confluence and inputting some text on the page. Despite trying multiple combinations, I have not been able to locate the text input element on the webpage. Below is the code snippet I've been us ...

pythonhtmlseleniumxpathselenium-chromedriver

Straightforward JSON issue

I am new to JSON and I need to work with it now. I have tried several examples from the jQuery page, but they don't seem to be working for me. I have a *.php file that generates a string. From what I understand, this is how I pass JSON data from PHP ...

phpjavascriptjqueryjsongalleria

Is it possible for Prototype to enhance SVG components?

Having some issues developing an interactive SVG map with Prototype. Extending inline SVG elements seems to be causing problems. Take a look at my code snippet below (path data removed for brevity): <svg id="map" xmlns="http://www.w3.org/2000/svg" xmln ...

javascriptsvgprototypejs

Enhance your website with a stylish drop-down menu from inc.com

I am trying to create a drop and hide menu effect similar to the one on Here is my current demo: http://jsfiddle.net/elementhttp/56ThC/ $("#1").mouseover(function(){ //alert("aaaaaaaaaa"); just for testing $(".block2").stop().fadeToggle(700 ...

jqueryhtmlcss

What is the best way to insert a space within a stationary element?

I'm facing an issue with two fixed elements positioned at the bottom of my webpage: #wrapper { position: fixed; background: gray; color: #fff; bottom: 0; left: 0; right: 0; border-radius: 12px 12px 0 0; width: 100%; } #bottom-eleme ...

htmlcss

Leaving out the return statement in an asynchronous typed function

Consider this example: export async function foo(): Promise<string>{ await bar() return; } No errors are thrown during compilation. However, if you change the code to: export async function foo(): Promise<string>{ await bar() } You w ...

javascripttypescriptpromiseasync-awaitreturn

A guide on triggering a button click event in React across multiple components

As a newcomer to React, I am struggling to grasp the concept of one-way data flow. While working on a simple app with mdbootstrap for ready bootstrap components, I encountered an issue linking a card's button to a modal component's button. The C ...

javascriptreactjsoopcomponents

Mysterious Source within AngularJS $resource

I have been encountering the error of unknown provider, and have explored various solutions but I feel like there is something missing: app.js var myApp = angular.module('myApp', [ 'ngResource', 'myAppControllers', ...

javascriptangularjsangular-resourceangular-factory

Using Java to input values into empty slots within an HTML document

I have an HTML file with the following content: <body> <p>Hello! <b>[NAME]%</b></p> </body> Additionally, in my Java file, I have the following code snippet: String name = "John"; I would like to know: How c ...

javahtml

How can the text color of an ASP Label be modified when the DropdownList value is updated?

Objective: Modify the text color of an ASP Label based on the selection made in an ASP Dropdown ListItem. If the ListItem's value is false, then set the Label's text color to red; otherwise, keep it black. Challenge: The color only changes when ...

javascriptc#cssasp.net

What methods can I use to generate unique paths within a URL for a website, and how can I assign a distinct status to each path?

I have developed a JavaScript program that allows you to draw using canvas. I have now set up a web server with Node.js in order to enable drawing on the website. Each specific drawing will be saved as a unique URL path so that you can resume where you lef ...

javascriptnode.js

Ways to transform a PHP function into one that can be invoked using Ajax

In my current project, I’m facing an issue where I need to call multiple PHP functions that output HTML using Ajax. Instead of directly trying to call a PHP function with Javascript, I believe application routing can help the frontend hit the correct fun ...

javascriptphpajax

Ways to change a value into int8, int16, int32, uint8, uint16, or uint32

In TypeScript, the number variable is floating point by default. However, there are situations where it's necessary to restrict the variable to a specific size or type similar to other programming languages. For instance, types like int8, int16, int32 ...

javascriptc#typescript

Centralize and confine the menu division

I have been working on creating a hover menu using CSS and Bootstrap, specifically for flex grid layouts. However, I have run into an issue where my menu is only as wide as its parent div. Furthermore, I am struggling to center the hover menu relative to ...

htmlcss

The React JS textarea's onchange event is not functioning properly when trying to set the value

This is a class component I created for an auto-suggest text area similar to Twitter's feature. import React, { Component, createRef } from 'react'; import { TextArea, List, Triangle } from './Styled'; import ge ...

javascripthtmlreactjs