Я хочу изменить курсор через jquery

Проблема в том, что я не хочу никаких внешних файлов или источников. Я также хочу, чтобы это было SVG, так что я думал, что это будет работать:Установить данные SVG как курсор

$("html").css("cursor: url('<svg><circle cx="5.7" cy="6.2" r="6"/></svg>'), auto");

но штрафной :(

Я konw уже есть много нитей о курсоре открытого, но ни один из них с прямым SVG данных

Thx заранее

PS:.? можно ли оживить эти данные динамически

источник

2017-01-16 sanojLeOne

Я не знаю, если это будет работать, но ваш код jQuery недействителен. Вам нужно передать 2 параметра функции 'css'. Попробуйте '' $ («html»). Css («курсор», «url (''), auto"); ' –

Это не URL-адрес, который вы предоставляете. Вам нужно указать внешний файл svg или URL-адрес данных (частью которого будут данные, которые у вас уже есть). Обратите внимание, что вашим данным не хватает пространства имен SVG, и это –

Это хороший вопрос, и есть два пути ее решения:

1) Создать Blob url и передать данные svg и передать URL-адрес в значение свойства (поддерживается только в некоторых браузерах)

2) Используйте URL-адрес данных, но есть уловка - если вы не укажете размеры, то курсор выиграл ' t, поскольку браузер не знает, какого размера это сделать. Кроме того, вам нужно добавить теги xmlns, или браузер все равно не отобразит их.

Обратите внимание, что я использовал строки ES6 для краткости, но если вы не используете транспилятор/хотите поддерживать старые браузеры, тогда измените на конкатенацию строк.

function svgUrl(svgString, width, height, viewBoxWidth, viewBoxHeight) { 
 
    viewBoxWidth = viewBoxWidth || width; 
 
    viewBoxHeight = viewBoxHeight || width; 
 
    return `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="${width}" height="${height}" viewBox="0 0 ${viewBoxWidth} ${viewBoxHeight}">${svgString}</svg>')`; 
 
} 
 

 
$('html').css('cursor', `${svgUrl('<circle cx="100" cy="100" r="100"/>', 100, 100, 200, 200)}, auto`);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

PS Вы можете также использовать строку base64, если вы беспокоитесь о недопустимых символах в данной SVG:

function svgToBase64Url(svgString, width, height) { 
    const base64SVG = btoa(`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="${width}px" height="${height}px">${svgString}</svg>`); 
    return `url('data:image/svg+xml;base64,${base64SVG}')`; 
}

источник

2017-01-16 15:54:42

Как правило, вам просто нужно кодировать # как% 23, чтобы он не интерпретировался как идентификатор фрагмента. Обычно это единственный недопустимый символ в utf8 data url –

Thx man отлично работает! Но что действительно влияет на ширину и высоту, потому что он не работает, если я устанавливаю его на 200? И возможно ли, чтобы курсор «hitpoint» находился посредине круга Btw thx для того, чтобы называть это хорошим вопросом – sanojLeOne

@sanojLeOne см. Мой отредактированный фрагмент - svg имеет некоторые запутанные свойства viewBox, которые вам нужно настроить тоже (а также сами значения окружности) –

-1

Вы действительно можете использовать SVG для курсоры, но вам нужно сохранить SVG как отдельный файл, и ссылаться на него:

cursor: url('/path/to/your/graphic.svg');

источник

2017-01-16 15:11:51 Stuart

Нет, вы не можете использовать URL-адрес данных. –

Установить данные SVG как курсор

Я хочу изменить курсор через jquery

ответ

Смежные вопросы