SVG网址游标未更改游标 [英] SVG url cursor not changing cursor
问题描述
这是代码：
var svgUrl = "url('" + 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"' +
' version="1.1" width="32" height="32"><circle cx="16" cy="16" r="16" ' +
' style="fill: red;"/></svg>' +
"'), auto;";
这不起作用：
$("body").css('cursor', svgUrl);
这按预期工作：
$("body").css('cursor', "wait");
我尝试插入SVG标签以将其呈现为纯HTML，并且确实呈现了圆圈，所以我认为SVG标记还可以我拆分了svgUrl行以使其更具可读性。我缩小了范围，并提供了简单的代码来解决主要问题。在应用程序中，光标将动态更改...
I tried to insert the SVG tag to render it as plain HTML and it does render a circle so I think the SVG markup is OK. I split the svgUrl line to make it more readable. I have narrowed the issue and provided simple code to resolve the main problem. In the application, the cursor will change dynamically...
接受答案后进行编辑：
接受的答案将解决问的问题。但是，我想知道为什么，如果我使用答案中提供的字符串，这是行不通的？
The accepted answer resolves the question asked. However, I am wondering why, if I used the string provided in the answer, this does not work?
var theCursor = "url(\"" + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'" +
" version='1.1' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='16'" +
" style='fill: blue;'/%3E%3C/svg%3E\"), auto;";
$("body").css('cursor', theCursor);
推荐答案
-
I已经重写了游标规则，并保持了连接状态。请注意，某些引号已转义。
I've rewritten the cursor rule keeping your concatenation. Please note that some quotes are escaped.
为使其正常工作，我在创建新的< style> 元素，然后设置< head> 中的 textContent = theCursor;
To make it work I'm creating a new <style> element in the <head> and I'm setting the textContent = theCursor;
var s = document.createElement("style");
document.head.appendChild(s);
let theCursor = "body{cursor: url(\"" + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'"
+
" version='1.1' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='16'" +
" style='fill: blue;'/%3E%3C/svg%3E\"), auto;}";
s.textContent = theCursor;
body{
height:100vh;
/*
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='16' style='fill: red;'/%3E%3C/svg%3E"), auto;}
*/
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32">
<circle cx="16" cy="16" r="16" style="fill: red;"/>
</svg>
这篇关于SVG网址游标未更改游标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
