Question

有没有人能够将画布光标属性与uri一起使用？我无法使用这个uri：

canvas {
  cursor: url("data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100pt%22%20height%3D%22100pt%22%20viewBox%3D%220 0 100 100%22%3E%3Cpath%20fill%3D%22%23000%22%20stroke%3D%22transparent%22%20stroke-width%3D%220%22%20style%3D%22%22%20d%3D%22M3.11 40.086c0-.438.054-.867.14-1.293-.055-.406-.14-.383-.14 1.293z M89.469 37.363c-1.563.988-12.547 7.71-13.797 6.875-.613-.414 1.922-3.93.805-5.438-1.578-2.128-1.184-5.003-1.973-7.417-.707-2.16-3.422-3.739-3.832-5.754-.355-1.73 2.02-2.672.687-4.477-1.53.941-3.062 1.887-4.593 2.832-.817-3.66.972-6.969-4.153-3.27-4.234 3.055-8.152 5.618-10.289 10.586-1.625 3.778-.855 9.61-5.175 11.184-4.54 1.657-9.243 3.38-13.547 5.582-3.176 1.63-6.075 5.782-9.72 6.204-4.023.464-5.124-8.32-5.515-10.906-.66-4.38-1.25-9.04-6.21-10.535-4.012-1.211-8.145 2.02-8.919 5.957.063.468.078 1.511-.14 1.293 1.773 1.785 5.03-5.508 6.96-1.41 2.325 4.937 1.805 11.27 2.88 16.542 1.59 7.848 5.117 20.117 13.823 22.727 2.2.66 5.422-1.004 5.2 2.2-.164 2.367-2.008 3.976.109 6.16 2.887 2.98 13.785 1.57 17.66 1.34 1.723-.102 10.637-.864 8.137-4.649-1.547-2.348-6.176-1.324-8.48-1.324 1.394-2.465 4.14-3.824 4.964-6.66 3.09 4.14 4.938 12.96 10.438 12.96 1.477 0 7.379.641 6.043-2.757-.77-1.95-2.586-1.313-3.832-2.602-6.629-6.836-5.352-25.246 5.023-27.78 6.2-1.52 13.176-6.102 17.203-11.028 2.239-2.738 8.184-6.37 8.895-10.03 1.148-5.833-8.29 3.367-8.652 3.597zm-16.812-1.582a.82.82 0 1 1 0-1.64.82.82 0 0 1 0 1.64z%22%2F%3E%3C%2Fsvg%3E")
}

是否可以使用URI或者我真的需要为此请求资源吗？

Answer 1

宽度和高度必须为defined in pixels：

[...] SVG图像必须在其根SVG节点上包含长度值（非百分比值）的高度和宽度。 [...]

您还必须提供后备图像，或至少提供“自动”或“指针”。并非所有浏览器都支持SVG作为源。

在这种情况下，您可以将pt单位（依赖于DPI）更改为px，它应该在支持SVG的浏览器中运行：

div  {
  padding:30px;
  cursor: url("data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100px%22%20height%3D%22100px%22%20viewBox%3D%220 0 100 100%22%3E%3Cpath%20fill%3D%22%23000%22%20stroke%3D%22transparent%22%20stroke-width%3D%220%22%20style%3D%22%22%20d%3D%22M3.11 40.086c0-.438.054-.867.14-1.293-.055-.406-.14-.383-.14 1.293z M89.469 37.363c-1.563.988-12.547 7.71-13.797 6.875-.613-.414 1.922-3.93.805-5.438-1.578-2.128-1.184-5.003-1.973-7.417-.707-2.16-3.422-3.739-3.832-5.754-.355-1.73 2.02-2.672.687-4.477-1.53.941-3.062 1.887-4.593 2.832-.817-3.66.972-6.969-4.153-3.27-4.234 3.055-8.152 5.618-10.289 10.586-1.625 3.778-.855 9.61-5.175 11.184-4.54 1.657-9.243 3.38-13.547 5.582-3.176 1.63-6.075 5.782-9.72 6.204-4.023.464-5.124-8.32-5.515-10.906-.66-4.38-1.25-9.04-6.21-10.535-4.012-1.211-8.145 2.02-8.919 5.957.063.468.078 1.511-.14 1.293 1.773 1.785 5.03-5.508 6.96-1.41 2.325 4.937 1.805 11.27 2.88 16.542 1.59 7.848 5.117 20.117 13.823 22.727 2.2.66 5.422-1.004 5.2 2.2-.164 2.367-2.008 3.976.109 6.16 2.887 2.98 13.785 1.57 17.66 1.34 1.723-.102 10.637-.864 8.137-4.649-1.547-2.348-6.176-1.324-8.48-1.324 1.394-2.465 4.14-3.824 4.964-6.66 3.09 4.14 4.938 12.96 10.438 12.96 1.477 0 7.379.641 6.043-2.757-.77-1.95-2.586-1.313-3.832-2.602-6.629-6.836-5.352-25.246 5.023-27.78 6.2-1.52 13.176-6.102 17.203-11.028 2.239-2.738 8.184-6.37 8.895-10.03 1.148-5.833-8.29 3.367-8.652 3.597zm-16.812-1.582a.82.82 0 1 1 0-1.64.82.82 0 0 1 0 1.64z%22%2F%3E%3C%2Fsvg%3E") 122 40
          , auto;  /* Also remember a fallback */
  }

<div>Hover me</div>

使用Canvas Cursor css属性和uri？

1 个答案: