JarsOfJam-Scheduler
JarsOfJam-Scheduler

Reputation: 3149

CSS SVG Cursor not displayed, what is bad with my SVG file content?

I have written the following SVG cursor, stored in a file. I would want to use this SVG file to customize the cursor of an element. The file is correctly fetched (no error 404 not found).

In my file 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:

#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. How could I fix this problem?

Upvotes: 0

Views: 210

Answers (1)

Victoria Iashchuk
Victoria Iashchuk

Reputation: 274

The width and height of your svg is too large, change it to 128×128px.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property#Limitations

Upvotes: 2

Related Questions