svg cursor pointer missing between two sub-component

up vote
-1
down vote

favorite

@namespace svgns url(http://www.w3.org/2000/svg);

html,body,svg { height:100% }/* As SVG does not provide a default visual style for links,

   it's considered best practice to add some */



@namespace svgns url(http://www.w3.org/2000/svg);



svgns|a {

  cursor: pointer;

}



svgns|a text {

  fill: blue; /* Even for text, SVG use fill over color */

  text-decoration: underline;

}



svgns|a:hover, svgns|a:active {

  outline: dotted 1px blue;

}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a -->



<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  



  <!-- A link around a text -->

  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">

  <g style="cursor: pointer">

    <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="50" width="50"/>

    <text x="50" y="90" text-anchor="middle">

      &lt;circle&gt;

    </text>

    </g>

  </a>

</svg>

I have an SVG, it contains animage as well as text. the SVGhas style { cursor: pointer}.
When I hover on the image, I can have cursor pointer, same to the text. But if I hover on that space between the image and text, I lose the "hand".
Is there any way I can have it?

Thanks for the help.

example

enter code here

edited yesterday

Blaze

2,446324

asked yesterday

jack

New contributor

You can add cursor: pointer to entire svg element if you do not have any other elements in svg.
– extempl
yesterday

add a comment |

up vote
-1
down vote

favorite

@namespace svgns url(http://www.w3.org/2000/svg);

html,body,svg { height:100% }/* As SVG does not provide a default visual style for links,

   it's considered best practice to add some */



@namespace svgns url(http://www.w3.org/2000/svg);



svgns|a {

  cursor: pointer;

}



svgns|a text {

  fill: blue; /* Even for text, SVG use fill over color */

  text-decoration: underline;

}



svgns|a:hover, svgns|a:active {

  outline: dotted 1px blue;

}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a -->



<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  



  <!-- A link around a text -->

  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">

  <g style="cursor: pointer">

    <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="50" width="50"/>

    <text x="50" y="90" text-anchor="middle">

      &lt;circle&gt;

    </text>

    </g>

  </a>

</svg>

Thanks for the help.

example

enter code here

edited yesterday

Blaze

2,446324

asked yesterday

jack

New contributor

You can add cursor: pointer to entire svg element if you do not have any other elements in svg.
– extempl
yesterday

add a comment |

up vote
-1
down vote

favorite

@namespace svgns url(http://www.w3.org/2000/svg);

html,body,svg { height:100% }/* As SVG does not provide a default visual style for links,

   it's considered best practice to add some */



@namespace svgns url(http://www.w3.org/2000/svg);



svgns|a {

  cursor: pointer;

}



svgns|a text {

  fill: blue; /* Even for text, SVG use fill over color */

  text-decoration: underline;

}



svgns|a:hover, svgns|a:active {

  outline: dotted 1px blue;

}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a -->



<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  



  <!-- A link around a text -->

  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">

  <g style="cursor: pointer">

    <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="50" width="50"/>

    <text x="50" y="90" text-anchor="middle">

      &lt;circle&gt;

    </text>

    </g>

  </a>

</svg>

Thanks for the help.

example

enter code here

edited yesterday

Blaze

2,446324

asked yesterday

jack

New contributor

@namespace svgns url(http://www.w3.org/2000/svg);

html,body,svg { height:100% }/* As SVG does not provide a default visual style for links,

   it's considered best practice to add some */



@namespace svgns url(http://www.w3.org/2000/svg);



svgns|a {

  cursor: pointer;

}



svgns|a text {

  fill: blue; /* Even for text, SVG use fill over color */

  text-decoration: underline;

}



svgns|a:hover, svgns|a:active {

  outline: dotted 1px blue;

}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a -->



<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  



  <!-- A link around a text -->

  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">

  <g style="cursor: pointer">

    <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="50" width="50"/>

    <text x="50" y="90" text-anchor="middle">

      &lt;circle&gt;

    </text>

    </g>

  </a>

</svg>

Thanks for the help.

example

enter code here

@namespace svgns url(http://www.w3.org/2000/svg);

html,body,svg { height:100% }/* As SVG does not provide a default visual style for links,

   it's considered best practice to add some */



@namespace svgns url(http://www.w3.org/2000/svg);



svgns|a {

  cursor: pointer;

}



svgns|a text {

  fill: blue; /* Even for text, SVG use fill over color */

  text-decoration: underline;

}



svgns|a:hover, svgns|a:active {

  outline: dotted 1px blue;

}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a -->



<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  



  <!-- A link around a text -->

  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">

  <g style="cursor: pointer">

    <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="50" width="50"/>

    <text x="50" y="90" text-anchor="middle">

      &lt;circle&gt;

    </text>

    </g>

  </a>

</svg>

@namespace svgns url(http://www.w3.org/2000/svg);

html,body,svg { height:100% }/* As SVG does not provide a default visual style for links,

   it's considered best practice to add some */



@namespace svgns url(http://www.w3.org/2000/svg);



svgns|a {

  cursor: pointer;

}



svgns|a text {

  fill: blue; /* Even for text, SVG use fill over color */

  text-decoration: underline;

}



svgns|a:hover, svgns|a:active {

  outline: dotted 1px blue;

}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a -->



<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  



  <!-- A link around a text -->

  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">

  <g style="cursor: pointer">

    <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="50" width="50"/>

    <text x="50" y="90" text-anchor="middle">

      &lt;circle&gt;

    </text>

    </g>

  </a>

</svg>

svg

edited yesterday

Blaze

2,446324

asked yesterday

jack

New contributor

edited yesterday

Blaze

2,446324

asked yesterday

jack

New contributor

edited yesterday

Blaze

2,446324

edited yesterday

Blaze

2,446324

edited yesterday

Blaze

2,446324

asked yesterday

jack

New contributor

asked yesterday

jack

asked yesterday

jack

New contributor

jack is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

You can add cursor: pointer to entire svg element if you do not have any other elements in svg.
– extempl
yesterday

add a comment |

You can add cursor: pointer to entire svg element if you do not have any other elements in svg.
– extempl
yesterday

You can add cursor: pointer to entire svg element if you do not have any other elements in svg.
– extempl
yesterday

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

You can apply cursor: pointer to entire svg element if this is all content you have in svg.
Otherwise, you can add a simple rect before the image:

<rect x="0" y="0" width="100" height="100" fill="transparent" />

As the g element can't be styled directly, as styles apply to nested elements only, but rect can be (and as a nested element of g as well).

@namespace svgns url(http://www.w3.org/2000/svg);

html,

body,

svg {

  height: 100%

}





/* As SVG does not provide a default visual style for links,

   it's considered best practice to add some */



svgns|a {

  cursor: pointer;

}



svgns|a text {

  fill: blue;

  /* Even for text, SVG use fill over color */

  text-decoration: underline;

}



svgns|a:hover,

svgns|a:active {

  outline: dotted 1px blue;

}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a -->



<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  



  <!-- A link around a text -->

  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">

    <rect x="0" y="0" width="100" height="100" fill="transparent" />

    <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="50" width="50"/>

    <text x="50" y="90" text-anchor="middle">

      &lt;circle&gt;

    </text>

  </a>

</svg>

answered yesterday

extempl

1,2501027

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

jack is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53183880%2fsvg-cursor-pointer-missing-between-two-sub-component%23new-answer', 'question_page');
}
);

Post as a guest

Name

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

You can apply cursor: pointer to entire svg element if this is all content you have in svg.
Otherwise, you can add a simple rect before the image:

<rect x="0" y="0" width="100" height="100" fill="transparent" />

As the g element can't be styled directly, as styles apply to nested elements only, but rect can be (and as a nested element of g as well).

@namespace svgns url(http://www.w3.org/2000/svg);

html,

body,

svg {

  height: 100%

}





/* As SVG does not provide a default visual style for links,

   it's considered best practice to add some */



svgns|a {

  cursor: pointer;

}



svgns|a text {

  fill: blue;

  /* Even for text, SVG use fill over color */

  text-decoration: underline;

}



svgns|a:hover,

svgns|a:active {

  outline: dotted 1px blue;

}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a -->



<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  



  <!-- A link around a text -->

  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">

    <rect x="0" y="0" width="100" height="100" fill="transparent" />

    <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="50" width="50"/>

    <text x="50" y="90" text-anchor="middle">

      &lt;circle&gt;

    </text>

  </a>

</svg>

answered yesterday

extempl

1,2501027

add a comment |

up vote
0
down vote

You can apply cursor: pointer to entire svg element if this is all content you have in svg.
Otherwise, you can add a simple rect before the image:

<rect x="0" y="0" width="100" height="100" fill="transparent" />

As the g element can't be styled directly, as styles apply to nested elements only, but rect can be (and as a nested element of g as well).

@namespace svgns url(http://www.w3.org/2000/svg);

html,

body,

svg {

  height: 100%

}





/* As SVG does not provide a default visual style for links,

   it's considered best practice to add some */



svgns|a {

  cursor: pointer;

}



svgns|a text {

  fill: blue;

  /* Even for text, SVG use fill over color */

  text-decoration: underline;

}



svgns|a:hover,

svgns|a:active {

  outline: dotted 1px blue;

}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a -->



<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  



  <!-- A link around a text -->

  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">

    <rect x="0" y="0" width="100" height="100" fill="transparent" />

    <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="50" width="50"/>

    <text x="50" y="90" text-anchor="middle">

      &lt;circle&gt;

    </text>

  </a>

</svg>

answered yesterday

extempl

1,2501027

add a comment |

up vote
0
down vote

You can apply cursor: pointer to entire svg element if this is all content you have in svg.
Otherwise, you can add a simple rect before the image:

<rect x="0" y="0" width="100" height="100" fill="transparent" />

As the g element can't be styled directly, as styles apply to nested elements only, but rect can be (and as a nested element of g as well).

@namespace svgns url(http://www.w3.org/2000/svg);

html,

body,

svg {

  height: 100%

}





/* As SVG does not provide a default visual style for links,

   it's considered best practice to add some */



svgns|a {

  cursor: pointer;

}



svgns|a text {

  fill: blue;

  /* Even for text, SVG use fill over color */

  text-decoration: underline;

}



svgns|a:hover,

svgns|a:active {

  outline: dotted 1px blue;

}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a -->



<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  



  <!-- A link around a text -->

  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">

    <rect x="0" y="0" width="100" height="100" fill="transparent" />

    <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="50" width="50"/>

    <text x="50" y="90" text-anchor="middle">

      &lt;circle&gt;

    </text>

  </a>

</svg>

answered yesterday

extempl

1,2501027

You can apply cursor: pointer to entire svg element if this is all content you have in svg.
Otherwise, you can add a simple rect before the image:

<rect x="0" y="0" width="100" height="100" fill="transparent" />

As the g element can't be styled directly, as styles apply to nested elements only, but rect can be (and as a nested element of g as well).

@namespace svgns url(http://www.w3.org/2000/svg);

html,

body,

svg {

  height: 100%

}





/* As SVG does not provide a default visual style for links,

   it's considered best practice to add some */



svgns|a {

  cursor: pointer;

}



svgns|a text {

  fill: blue;

  /* Even for text, SVG use fill over color */

  text-decoration: underline;

}



svgns|a:hover,

svgns|a:active {

  outline: dotted 1px blue;

}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a -->



<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  



  <!-- A link around a text -->

  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">

    <rect x="0" y="0" width="100" height="100" fill="transparent" />

    <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="50" width="50"/>

    <text x="50" y="90" text-anchor="middle">

      &lt;circle&gt;

    </text>

  </a>

</svg>

@namespace svgns url(http://www.w3.org/2000/svg);

html,

body,

svg {

  height: 100%

}





/* As SVG does not provide a default visual style for links,

   it's considered best practice to add some */



svgns|a {

  cursor: pointer;

}



svgns|a text {

  fill: blue;

  /* Even for text, SVG use fill over color */

  text-decoration: underline;

}



svgns|a:hover,

svgns|a:active {

  outline: dotted 1px blue;

}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a -->



<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  



  <!-- A link around a text -->

  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">

    <rect x="0" y="0" width="100" height="100" fill="transparent" />

    <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="50" width="50"/>

    <text x="50" y="90" text-anchor="middle">

      &lt;circle&gt;

    </text>

  </a>

</svg>

@namespace svgns url(http://www.w3.org/2000/svg);

html,

body,

svg {

  height: 100%

}





/* As SVG does not provide a default visual style for links,

   it's considered best practice to add some */



svgns|a {

  cursor: pointer;

}



svgns|a text {

  fill: blue;

  /* Even for text, SVG use fill over color */

  text-decoration: underline;

}



svgns|a:hover,

svgns|a:active {

  outline: dotted 1px blue;

}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a -->



<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  



  <!-- A link around a text -->

  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">

    <rect x="0" y="0" width="100" height="100" fill="transparent" />

    <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="50" width="50"/>

    <text x="50" y="90" text-anchor="middle">

      &lt;circle&gt;

    </text>

  </a>

</svg>

answered yesterday

extempl

1,2501027

answered yesterday

extempl

1,2501027

answered yesterday

extempl

1,2501027

answered yesterday

extempl

1,2501027

add a comment |

jack is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

jack is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Zystkmt