[英]CSS SVG Cursor not displayed, what is bad with my SVG file content?
I have written the following SVG cursor, stored in a file.我写了以下 SVG cursor,存储在一个文件中。 I would want to use this SVG file to customize the cursor of an element.
我想使用这个 SVG 文件来自定义元素的 cursor。 The file is correctly fetched (no error 404 not found).
该文件已正确获取(未找到错误 404)。
In my file images/curseur-construire.svg
:在我的文件
images/curseur-construire.svg
:
<svg id="Groupe_4" data-name="Groupe 4" xmlns="http://www.w3.org/2000/svg" width="156.438" height="156.438" viewBox="0 0 156.438 156.438">
<defs>
<style>
.cls-1 {
fill: #f29400;
opacity: 0.9;
}
.cls-2 {
fill: #fff;
fill-rule: evenodd;
}
</style>
</defs>
<circle id="_-e-Ellipse_1" data-name="-e-Ellipse 1" class="cls-1" cx="78.219" cy="78.219" r="78.219"/>
<path id="Construire" class="cls-2" d="M812.9,275.369a6.793,6.793,0,0,0,2.768-.544,5.338,5.338,0,0,0,2.048-1.568l-2.016-1.824a3.317,3.317,0,0,1-2.64,1.312,3.266,3.266,0,0,1-1.624-.4,2.776,2.776,0,0,1-1.1-1.128,3.762,3.762,0,0,1,0-3.344,2.764,2.764,0,0,1,1.1-1.128,3.256,3.256,0,0,1,1.624-.4,3.314,3.314,0,0,1,2.64,1.312l2.016-1.824a5.318,5.318,0,0,0-2.048-1.568,6.776,6.776,0,0,0-2.768-.544,6.628,6.628,0,0,0-3.16.744,5.559,5.559,0,0,0-2.2,2.072,6.055,6.055,0,0,0,0,6.016,5.566,5.566,0,0,0,2.2,2.072,6.628,6.628,0,0,0,3.16.744h0Zm11.024-.08a5.447,5.447,0,0,0,2.528-.576,4.294,4.294,0,0,0,1.744-1.6,4.61,4.61,0,0,0,0-4.632,4.244,4.244,0,0,0-1.744-1.584,5.892,5.892,0,0,0-5.048,0,4.442,4.442,0,0,0-1.744,6.216,4.348,4.348,0,0,0,1.752,1.6,5.412,5.412,0,0,0,2.512.576h0Zm0-2.416a1.71,1.71,0,0,1-1.312-.552,2.163,2.163,0,0,1-.512-1.528,2.108,2.108,0,0,1,.512-1.5,1.854,1.854,0,0,1,2.624,0,2.108,2.108,0,0,1,.512,1.5,2.163,2.163,0,0,1-.512,1.528,1.71,1.71,0,0,1-1.312.552h0Zm12.7-6.544a4.11,4.11,0,0,0-1.536.28,3.437,3.437,0,0,0-1.216.808v-0.944h-2.9v8.672h3.04v-4.192a2.195,2.195,0,0,1,.472-1.536,1.624,1.624,0,0,1,1.256-.512q1.423,0,1.424,1.776v4.464h3.04v-4.96a3.876,3.876,0,0,0-.984-2.9,3.564,3.564,0,0,0-2.6-.96h0Zm8.9,8.96a6.567,6.567,0,0,0,2.328-.368,3.24,3.24,0,0,0,1.464-1.016,2.345,2.345,0,0,0,.5-1.464,2.161,2.161,0,0,0-.52-1.544,2.712,2.712,0,0,0-1.224-.76,13.226,13.226,0,0,0-1.776-.368,8.533,8.533,0,0,1-1.216-.248,0.444,0.444,0,0,1-.368-0.424,0.5,0.5,0,0,1,.336-0.44,2.488,2.488,0,0,1,1.056-.168,5.052,5.052,0,0,1,2.5.64l0.912-2.064a5.367,5.367,0,0,0-1.552-.544,9.221,9.221,0,0,0-1.872-.192,6.2,6.2,0,0,0-2.28.376,3.284,3.284,0,0,0-1.448,1.024,2.367,2.367,0,0,0-.5,1.48,2.2,2.2,0,0,0,.528,1.568,2.736,2.736,0,0,0,1.256.768,11.944,11.944,0,0,0,1.768.336,7.709,7.709,0,0,1,1.192.232,0.438,0.438,0,0,1,.376.408,0.477,0.477,0,0,1-.312.44,2.593,2.593,0,0,1-1.048.152,6.3,6.3,0,0,1-1.616-.216,5.166,5.166,0,0,1-1.408-.584l-0.912,2.08a5.7,5.7,0,0,0,1.7.648,9.367,9.367,0,0,0,2.144.248h0Zm11.48-2.624a1.614,1.614,0,0,1-.928.272,0.868,0.868,0,0,1-.664-0.264,1.023,1.023,0,0,1-.248-0.728v-2.88h1.984v-2.272h-1.984v-2.256h-3.04v2.256h-1.264v2.272h1.264v2.912a3.192,3.192,0,0,0,.912,2.48,3.738,3.738,0,0,0,2.608.832,5.214,5.214,0,0,0,1.176-.128,3.08,3.08,0,0,0,.936-0.368Zm5.064-5.152v-1.04h-2.9v8.672h3.04v-3.984a1.893,1.893,0,0,1,2.08-2.144,6.215,6.215,0,0,1,.688.048v-2.736a4.569,4.569,0,0,0-1.7.3,2.822,2.822,0,0,0-1.208.888h0Zm10.584-1.04v4.176a2.245,2.245,0,0,1-.456,1.544,1.513,1.513,0,0,1-1.176.5,1.309,1.309,0,0,1-1.072-.448,2.237,2.237,0,0,1-.368-1.424v-4.352h-3.04v4.848a4.023,4.023,0,0,0,1,2.976,3.64,3.64,0,0,0,2.68.992,3.767,3.767,0,0,0,1.424-.272,3.123,3.123,0,0,0,1.152-.8v0.928h2.9v-8.672h-3.04Zm5.32,8.672h3.04v-8.672h-3.04v8.672Zm1.52-9.632a1.906,1.906,0,0,0,1.344-.472,1.553,1.553,0,0,0,.512-1.192,1.42,1.42,0,0,0-.512-1.128,1.985,1.985,0,0,0-1.344-.44,1.92,1.92,0,0,0-1.344.464,1.552,1.552,0,0,0,0,2.3,1.925,1.925,0,0,0,1.344.464h0Zm6.776,2v-1.04h-2.9v8.672h3.04v-3.984a1.893,1.893,0,0,1,2.08-2.144,6.215,6.215,0,0,1,.688.048v-2.736a4.569,4.569,0,0,0-1.7.3,2.822,2.822,0,0,0-1.208.888h0Zm13.368,3.312a4.552,4.552,0,0,0-.616-2.408,4.073,4.073,0,0,0-1.672-1.552,5.46,5.46,0,0,0-4.8.04,4.369,4.369,0,0,0,.1,7.808,5.9,5.9,0,0,0,2.672.576,4.714,4.714,0,0,0,3.7-1.408l-1.6-1.664a3.211,3.211,0,0,1-.92.576,3,3,0,0,1-1.08.176,2.483,2.483,0,0,1-1.384-.36,1.764,1.764,0,0,1-.744-1.032h6.3q0.048-.72.048-0.752h0Zm-4.624-2.336a1.756,1.756,0,0,1,1.176.4,1.8,1.8,0,0,1,.6,1.088H893.24a1.8,1.8,0,0,1,.6-1.088,1.756,1.756,0,0,1,1.176-.4h0Z" transform="translate(-774.781 -190.781)"/>
</svg>
In my CSS:在我的 CSS 中:
#home_slider_fixed_template {
cursor: url(images/curseur-construire.svg);
}
My problem is that the cursor remains the same than the Firefox's one by default.我的问题是 cursor 默认情况下与 Firefox 相同。 How could I fix this problem?
我该如何解决这个问题?
The width
and height
of your svg
is too large, change it to 128×128px
.你的
svg
的width
height
过大,改成128×128px
。
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property#Limitations https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property#Limitations
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.