为光标添加颜色：url（“ data：image）

Question

如何在现有CSS中为SVG光标添加颜色

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 ='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;

}

Answer 2

添加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;

}