It is impossible for me to utilize inline SVG as a custom cursor in CSS

Below is the code I have written. I am attempting to change the cursor using an inline SVG, but it doesn't seem to be working as expected. However, when I use the same code as a background, it works perfectly:

.container {
  width: 50vw;
  height: 50vh;
  background-color:#ccc;
  cursor: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' version='1.1' id='Layer_1' x='0px' y='0px' viewBox='0 0 200 199.99999' xml:space='preserve' sodipodi:docname='close-icon.svg' inkscape:version='1.0 (4035a4fb49, 2020-05-01)' width='200' height='200'%3E%3Cmetadata id='metadata852'%3E%3Crdf:RDF%3E%3C cc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:...
}
<div class="container"></div>

htmlcsssvg

Answer №1

There are two issues you need to address:

  • Most browsers impose a maximum size limit on cursors of 128 x 128 px to prevent misuse. Your cursor is sized at 200 x 200px, which means it will not be recognized.
  • To properly use URL cursors, a fallback option is necessary.

Answer №2

Ensure to include , auto right after your data url:

cursor: url(data:image/png;base64,...), auto;

It is important to specify the fallback as auto.

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

What steps should I take to adjust the text size in my media query?

I'm facing a challenge with a media query to decrease the font size of a text. It seems like a straightforward task, yet I can't pinpoint the issue. HTML: <div class="fp-featured"> <div class="fp-title">TITLE</div> <p class ...

htmlcss

Positioning JQuery tooltips

I've been developing a simple tooltip tool (check out the fiddle link below), but I'm encountering some issues with positioning. My goal is to have the tooltip appear centered and above the clicked link, however right now it appears at the top le ...

javascriptjqueryhtmlcsstooltip

How to modify checkbox and textarea values in a MySQL database with Jquery

In my MySQL database, I have a textarea and three checkboxes. By default, the textarea value is null and the checkbox values are set to zero (0). When I enter text into the textarea, I am able to update the text value in my database. However, I am facing ...

phpjqueryhtmlmysql

Steps for adding a stroke to just the left and right sides of an SVG wave:

How do I apply a stroke only to the right and left sides of an SVG (specifically a wave SVG)? <svg class="defs-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="wave"> <svg viewBox="0 0 100 50" ...

htmlcsssvg

Why aren't NavBar Image Links Functional, even though the code seems flawless? What could be the issue?

Looking at the current HTML code snippet I have within the <head> section, it includes: <ul class="nav"> <li> <a href="http://www.greg-holmes.com/#/title" target="_blank"> <img src="img/home.png"> ...

htmlcssnavbar

Refrain from engaging with "disabled" table rows to prevent user interaction

I have an HTML table with certain rows marked as 'disabled'. To make this clear to the user, I decided to apply a blur filter to the tr, resulting in a table that looks like this: https://i.stack.imgur.com/GcX67.png NOTE: You can view a live ex ...

htmlcss

A step-by-step guide to effectively removing special characters generated by an array while populating the name field of an email in PHP

I have developed a custom email application and I want to implement a filter that removes special characters (e.g. !@£$%^) when a user submits the form. Here's my current implementation: <?php $name = $_POST['name']; $to = "<a ...

phphtml

Tips on implementing a Javascript function triggered by a user's click within the video player frame

<script> function greet() { alert("hello"); } </script> <iframe width="100%" height="315" src="https://www.youtube.com/embed/AGM0ibP1MRc" onclick="greet()"></iframe> .Kindly assist me, please. ...

javascriptphphtml

Comparison of HTML's equivalent to LaTeX's label and ef functionality

I have a Frequently Asked Questions page coded in HTML (example) where the questions often refer to one another. This results in the numbering changing whenever we add, delete, or rearrange the questions. LaTeX provides an elegant solution to this problem ...

htmldocumentationlatexdocumentation-generation

Troubleshooting problems with jqplot pie charts

Currently, I am utilizing jqplot to create pie charts. Despite following the example code provided in the jqplot documentation, I am encountering errors such as "e.jqplot is undefined." Below is a snippet of my code: <script src="jquery-2.0.3.js"> ...

jqueryhtmljqplot

What is the best way to consistently update the name of a variable in PHP?

Forgive me in advance if my question seems a bit confusing. I currently have three separate PHP files. The first one prompts the user to select the quantity of products they want (between 1-20) using a variable called $quantity. Once a number is chosen fr ...

phphtml

What is preventing me from updating one dropdown list based on the selection made in another dropdown list?

I have a situation on a classic asp page where there are two dropdown lists: <select id="ddlState" name="ddlState" runat="server"> <option value="KY">Kentucky</option> <option value="IN" ...

javascripthtml

Send a string to directive via HTML

Trying to implement a "clipboard" directive following this example. In my case, I need to dynamically compute the string to be copied to the clipboard. The goal is to pass the output of a function that generates the string to the directive. Currently, I ...

htmlangulartypescriptangular2-formsangular2-directives

Why won't my code work with a jQuery selector?

I'm struggling to retrieve the value from a dynamically generated <div> using jQuery. It seems like the syntax I'm using doesn't recognize the div with an id tag. The HTML code is stored in a variable, and below is a snippet of code w ...

jqueryhtmlajaxtypescriptpowerbi

Is there a way to make the table header stretch across the entire table when using display properties to simulate a <table>?

I made a switch from an old table to a new one constructed using Divs, and everything seems to be working fine except for one issue. I am trying to create a header that spans the entire width of the table without having multiple cells in the heading like i ...

htmlcss

Display PHP output for a brief moment

Here is the URL: http://www.example.com/?req=welcome. In PHP, to retrieve the parameter req, you can use the following code: echo $_GET['req']; The message will be displayed in the body but it should disappear after one second. What is the be ...

javascripthtml

Retrieve the radio button value from the HTML form

This website is designed to calculate ideal weight based on input data, but I am encountering an issue with the gender selection. The code seems to only recognize the first condition for female, while ignoring the else if condition for male. How can I fix ...

javascripthtml

What steps do I need to follow in order to utilize Express Generator to create a node skeleton with an HTML view

Is there a way to create a skeleton for Node.js using Express generator with an HTML view engine? For example, we typically do npm install -g express-generator express -v pug but it seems we cannot create a skeleton for express -v html ...

htmlnode.jsexpressexpress-generator

Trouble arises when trying to define the style for an element generated through the Document

I'm having trouble setting the style for a 'tr' element created using DOM within JavaScript. Here's the code snippet: var tr = document.createElement("tr"); tr.onmouseover=function(){this.style.backgroundColor='#fbf9e0';}; ...

javascripthtmldom

How can the dropdownlist CSS be modified when it is clicked or hovered over?

I recently came across a solution on how to enable a disabled dropdown list when clicked at . I attempted to implement this and added a grey background to the disabled selection. However, I encountered an issue where the background of the dropdown list re ...

jqueryhtmleventsdrop-down-menuradio-button