добавить цвет к курсору: url ("data: image)

Question

Как добавить цвет к SVG-курсору в существующем CSS

html {
    cursor: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E %3Cpath d='M127 64A63 63 0 0 1 64 127 63 63 0 0 1 1 64 63 63 0 0 1 64 1 63 63 0 0 1 127 64Z'/%3E %3C/svg%3E"), pointer; 

}

Answer 1

Добавить fill атрибут. но убедитесь, что используете одинарную кавычку, когда задаете атрибут fill.

html { cursor: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 512 512' fill='red' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E %3Cpath d='M127 64A63 63 0 0 1 64 127 63 63 0 0 1 1 64 63 63 0 0 1 64 1 63 63 0 0 1 127 64Z'/%3E %3C/svg%3E"), pointer;

}

Answer 2

добавить атрибут заполнения к fill = 'red'

html { cursor: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E %3Cpath fill='red' d='M127 64A63 63 0 0 1 64 127 63 63 0 0 1 1 64 63 63 0 0 1 64 1 63 63 0 0 1 127 64Z'/%3E %3C/svg%3E"), pointer;

}