SVG Circle Element Cx Cy R
I was using SVGcircleElement.cx (cy and r) and I started to write it in my main CSS this way :
circle{
cx: 50;
cy: 50;
r: 20;
fill: none;
stroke: var(--white);
stroke-width: 3;
}
But I figured out is was not working in Mozilla, so I put it in the html this way and it is working perfectly everywhere :
<circle cx="50" cy="50" r="20"/>
However as I have multiple circle I would love to use css and not repeat my self many time in html. Does anybody know how to write it to make it works ? (I already try moz-cx: 50; but obviously it was not working)
html css svg
edited Dec 31 '18 at 14:52
Temani Afif
72.3k94080
asked Dec 31 '18 at 14:48
GrmsGrms
558
|
show 1 more comment
I was using SVGcircleElement.cx (cy and r) and I started to write it in my main CSS this way :
circle{
cx: 50;
cy: 50;
r: 20;
fill: none;
stroke: var(--white);
stroke-width: 3;
}
But I figured out is was not working in Mozilla, so I put it in the html this way and it is working perfectly everywhere :
<circle cx="50" cy="50" r="20"/>
However as I have multiple circle I would love to use css and not repeat my self many time in html. Does anybody know how to write it to make it works ? (I already try moz-cx: 50; but obviously it was not working)
html css svg
edited Dec 31 '18 at 14:52
Temani Afif
72.3k94080
asked Dec 31 '18 at 14:48
GrmsGrms
558
first you need to add thesvgtag if you need helps, then I think some SVG attribute don't have CSS equivalent.
– Temani Afif
Dec 31 '18 at 14:51
You'd need to download the source code to Firefox and fix it to support this.
– Robert Longson
Dec 31 '18 at 14:56
I am sorry I don't know how to do that ?
– Grms
Dec 31 '18 at 14:59
@Grms in that case you'll have to stick to attributes.
– Robert Longson
Dec 31 '18 at 16:07
If you don't want to repeat yourself you may use the<use>element. In your case add anidto the circle (for exampleid="theCircle) and then you can reuse it like this:<use xlink:href = "#theCircle">You can also place it in a different position if you add axand/oryattribute to the<use>element.
– enxaneta
Dec 31 '18 at 16:24
|
show 1 more comment
I was using SVGcircleElement.cx (cy and r) and I started to write it in my main CSS this way :
circle{
cx: 50;
cy: 50;
r: 20;
fill: none;
stroke: var(--white);
stroke-width: 3;
}
But I figured out is was not working in Mozilla, so I put it in the html this way and it is working perfectly everywhere :
<circle cx="50" cy="50" r="20"/>
However as I have multiple circle I would love to use css and not repeat my self many time in html. Does anybody know how to write it to make it works ? (I already try moz-cx: 50; but obviously it was not working)
html css svg
edited Dec 31 '18 at 14:52
Temani Afif
72.3k94080
asked Dec 31 '18 at 14:48
GrmsGrms
558
I was using SVGcircleElement.cx (cy and r) and I started to write it in my main CSS this way :
circle{
cx: 50;
cy: 50;
r: 20;
fill: none;
stroke: var(--white);
stroke-width: 3;
}
But I figured out is was not working in Mozilla, so I put it in the html this way and it is working perfectly everywhere :
<circle cx="50" cy="50" r="20"/>
However as I have multiple circle I would love to use css and not repeat my self many time in html. Does anybody know how to write it to make it works ? (I already try moz-cx: 50; but obviously it was not working)
html css svg
html css svg
edited Dec 31 '18 at 14:52
Temani Afif
72.3k94080
asked Dec 31 '18 at 14:48
GrmsGrms
558
edited Dec 31 '18 at 14:52
Temani Afif
72.3k94080
asked Dec 31 '18 at 14:48
GrmsGrms
558
edited Dec 31 '18 at 14:52
Temani Afif
72.3k94080
edited Dec 31 '18 at 14:52
Temani Afif
72.3k94080
edited Dec 31 '18 at 14:52
Temani Afif
72.3k94080
72.3k94080
asked Dec 31 '18 at 14:48
GrmsGrms
558
asked Dec 31 '18 at 14:48
GrmsGrms
558
asked Dec 31 '18 at 14:48
GrmsGrms
558
558
first you need to add thesvgtag if you need helps, then I think some SVG attribute don't have CSS equivalent.
– Temani Afif
Dec 31 '18 at 14:51
You'd need to download the source code to Firefox and fix it to support this.
– Robert Longson
Dec 31 '18 at 14:56
I am sorry I don't know how to do that ?
– Grms
Dec 31 '18 at 14:59
@Grms in that case you'll have to stick to attributes.
– Robert Longson
Dec 31 '18 at 16:07
If you don't want to repeat yourself you may use the<use>element. In your case add anidto the circle (for exampleid="theCircle) and then you can reuse it like this:<use xlink:href = "#theCircle">You can also place it in a different position if you add axand/oryattribute to the<use>element.
– enxaneta
Dec 31 '18 at 16:24
|
show 1 more comment
first you need to add thesvgtag if you need helps, then I think some SVG attribute don't have CSS equivalent.
– Temani Afif
Dec 31 '18 at 14:51
You'd need to download the source code to Firefox and fix it to support this.
– Robert Longson
Dec 31 '18 at 14:56
I am sorry I don't know how to do that ?
– Grms
Dec 31 '18 at 14:59
@Grms in that case you'll have to stick to attributes.
– Robert Longson
Dec 31 '18 at 16:07
If you don't want to repeat yourself you may use the<use>element. In your case add anidto the circle (for exampleid="theCircle) and then you can reuse it like this:<use xlink:href = "#theCircle">You can also place it in a different position if you add axand/oryattribute to the<use>element.
– enxaneta
Dec 31 '18 at 16:24
first you need to add the
svg tag if you need helps, then I think some SVG attribute don't have CSS equivalent.– Temani Afif
Dec 31 '18 at 14:51
first you need to add the
svg tag if you need helps, then I think some SVG attribute don't have CSS equivalent.– Temani Afif
Dec 31 '18 at 14:51
You'd need to download the source code to Firefox and fix it to support this.
– Robert Longson
Dec 31 '18 at 14:56
You'd need to download the source code to Firefox and fix it to support this.
– Robert Longson
Dec 31 '18 at 14:56
I am sorry I don't know how to do that ?
– Grms
Dec 31 '18 at 14:59
I am sorry I don't know how to do that ?
– Grms
Dec 31 '18 at 14:59
@Grms in that case you'll have to stick to attributes.
– Robert Longson
Dec 31 '18 at 16:07
@Grms in that case you'll have to stick to attributes.
– Robert Longson
Dec 31 '18 at 16:07
If you don't want to repeat yourself you may use the
<use> element. In your case add an id to the circle (for example id="theCircle) and then you can reuse it like this: <use xlink:href = "#theCircle"> You can also place it in a different position if you add a x and/or y attribute to the <use> element.– enxaneta
Dec 31 '18 at 16:24
If you don't want to repeat yourself you may use the
<use> element. In your case add an id to the circle (for example id="theCircle) and then you can reuse it like this: <use xlink:href = "#theCircle"> You can also place it in a different position if you add a x and/or y attribute to the <use> element.– enxaneta
Dec 31 '18 at 16:24
|
show 1 more comment
0
active
oldest
votes
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',
autoActivateHeartbeat: false,
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53988704%2fsvg-circle-element-cx-cy-r%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53988704%2fsvg-circle-element-cx-cy-r%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
first you need to add the
svgtag if you need helps, then I think some SVG attribute don't have CSS equivalent.– Temani Afif
Dec 31 '18 at 14:51
You'd need to download the source code to Firefox and fix it to support this.
– Robert Longson
Dec 31 '18 at 14:56
I am sorry I don't know how to do that ?
– Grms
Dec 31 '18 at 14:59
@Grms in that case you'll have to stick to attributes.
– Robert Longson
Dec 31 '18 at 16:07
If you don't want to repeat yourself you may use the
<use>element. In your case add anidto the circle (for exampleid="theCircle) and then you can reuse it like this:<use xlink:href = "#theCircle">You can also place it in a different position if you add axand/oryattribute to the<use>element.– enxaneta
Dec 31 '18 at 16:24