Create a circle with 2 stroke
up vote
0
down vote
favorite
I use the library amchart to create a chart. On this chart, there is some bullet created with the element "circle". It's possible to create a border on this bullet but I would also like to create a halo to it to reach this kind of result :
But actually I just get something like this :
circle
{
r:5;
cx:0;
cy:0;
fill:#36004E;
stroke:#FFFFFF;
stroke-width:2;
}
body {
background: #333;
}
.module {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
svg {
fill: #333;
}<div class="module">
<svg version="1.1">
<circle transform="translate(8,52)" aria-label=" Nov 06, 2017 1.04" class="amcharts-graph-bullet"></circle>
</svg>
</div>I try to use the CSS property :
- :after
- :before
- text shadow
but nothing work until now.
jquery html css svg amcharts
asked Nov 8 at 11:28
Kvasir
3931824
|
show 1 more comment
up vote
0
down vote
favorite
I use the library amchart to create a chart. On this chart, there is some bullet created with the element "circle". It's possible to create a border on this bullet but I would also like to create a halo to it to reach this kind of result :
But actually I just get something like this :
circle
{
r:5;
cx:0;
cy:0;
fill:#36004E;
stroke:#FFFFFF;
stroke-width:2;
}
body {
background: #333;
}
.module {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
svg {
fill: #333;
}<div class="module">
<svg version="1.1">
<circle transform="translate(8,52)" aria-label=" Nov 06, 2017 1.04" class="amcharts-graph-bullet"></circle>
</svg>
</div>I try to use the CSS property :
- :after
- :before
- text shadow
but nothing work until now.
jquery html css svg amcharts
asked Nov 8 at 11:28
Kvasir
3931824
1
check this link stackoverflow.com/questions/35754734/…
– Znaneswar
Nov 8 at 11:34
I already try box-shadow but it's look like it don't have any effect on the element circle
– Kvasir
Nov 8 at 11:40
Try reuse your circle with<use>and stroke the<use>element for the second stroke.
– enxaneta
Nov 8 at 11:56
I can't add anything in the HTML.
– Kvasir
Nov 8 at 12:17
The problem is that you can't user:5; cx:0; cy:0;in your css You'll have to move at least the r in the SVG
– enxaneta
Nov 8 at 12:36
|
show 1 more comment
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I use the library amchart to create a chart. On this chart, there is some bullet created with the element "circle". It's possible to create a border on this bullet but I would also like to create a halo to it to reach this kind of result :
But actually I just get something like this :
circle
{
r:5;
cx:0;
cy:0;
fill:#36004E;
stroke:#FFFFFF;
stroke-width:2;
}
body {
background: #333;
}
.module {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
svg {
fill: #333;
}<div class="module">
<svg version="1.1">
<circle transform="translate(8,52)" aria-label=" Nov 06, 2017 1.04" class="amcharts-graph-bullet"></circle>
</svg>
</div>I try to use the CSS property :
- :after
- :before
- text shadow
but nothing work until now.
jquery html css svg amcharts
asked Nov 8 at 11:28
Kvasir
3931824
I use the library amchart to create a chart. On this chart, there is some bullet created with the element "circle". It's possible to create a border on this bullet but I would also like to create a halo to it to reach this kind of result :
But actually I just get something like this :
circle
{
r:5;
cx:0;
cy:0;
fill:#36004E;
stroke:#FFFFFF;
stroke-width:2;
}
body {
background: #333;
}
.module {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
svg {
fill: #333;
}<div class="module">
<svg version="1.1">
<circle transform="translate(8,52)" aria-label=" Nov 06, 2017 1.04" class="amcharts-graph-bullet"></circle>
</svg>
</div>I try to use the CSS property :
- :after
- :before
- text shadow
but nothing work until now.
circle
{
r:5;
cx:0;
cy:0;
fill:#36004E;
stroke:#FFFFFF;
stroke-width:2;
}
body {
background: #333;
}
.module {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
svg {
fill: #333;
}<div class="module">
<svg version="1.1">
<circle transform="translate(8,52)" aria-label=" Nov 06, 2017 1.04" class="amcharts-graph-bullet"></circle>
</svg>
</div>circle
{
r:5;
cx:0;
cy:0;
fill:#36004E;
stroke:#FFFFFF;
stroke-width:2;
}
body {
background: #333;
}
.module {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
svg {
fill: #333;
}<div class="module">
<svg version="1.1">
<circle transform="translate(8,52)" aria-label=" Nov 06, 2017 1.04" class="amcharts-graph-bullet"></circle>
</svg>
</div>jquery html css svg amcharts
jquery html css svg amcharts
asked Nov 8 at 11:28
Kvasir
3931824
asked Nov 8 at 11:28
Kvasir
3931824
asked Nov 8 at 11:28
Kvasir
3931824
asked Nov 8 at 11:28
Kvasir
3931824
asked Nov 8 at 11:28
Kvasir
3931824
3931824
1
check this link stackoverflow.com/questions/35754734/…
– Znaneswar
Nov 8 at 11:34
I already try box-shadow but it's look like it don't have any effect on the element circle
– Kvasir
Nov 8 at 11:40
Try reuse your circle with<use>and stroke the<use>element for the second stroke.
– enxaneta
Nov 8 at 11:56
I can't add anything in the HTML.
– Kvasir
Nov 8 at 12:17
The problem is that you can't user:5; cx:0; cy:0;in your css You'll have to move at least the r in the SVG
– enxaneta
Nov 8 at 12:36
|
show 1 more comment
1
check this link stackoverflow.com/questions/35754734/…
– Znaneswar
Nov 8 at 11:34
I already try box-shadow but it's look like it don't have any effect on the element circle
– Kvasir
Nov 8 at 11:40
Try reuse your circle with<use>and stroke the<use>element for the second stroke.
– enxaneta
Nov 8 at 11:56
I can't add anything in the HTML.
– Kvasir
Nov 8 at 12:17
The problem is that you can't user:5; cx:0; cy:0;in your css You'll have to move at least the r in the SVG
– enxaneta
Nov 8 at 12:36
1
1
check this link stackoverflow.com/questions/35754734/…
– Znaneswar
Nov 8 at 11:34
check this link stackoverflow.com/questions/35754734/…
– Znaneswar
Nov 8 at 11:34
I already try box-shadow but it's look like it don't have any effect on the element circle
– Kvasir
Nov 8 at 11:40
I already try box-shadow but it's look like it don't have any effect on the element circle
– Kvasir
Nov 8 at 11:40
Try reuse your circle with
<use> and stroke the <use> element for the second stroke.– enxaneta
Nov 8 at 11:56
Try reuse your circle with
<use> and stroke the <use> element for the second stroke.– enxaneta
Nov 8 at 11:56
I can't add anything in the HTML.
– Kvasir
Nov 8 at 12:17
I can't add anything in the HTML.
– Kvasir
Nov 8 at 12:17
The problem is that you can't use
r:5; cx:0; cy:0;in your css You'll have to move at least the r in the SVG– enxaneta
Nov 8 at 12:36
The problem is that you can't use
r:5; cx:0; cy:0;in your css You'll have to move at least the r in the SVG– enxaneta
Nov 8 at 12:36
|
show 1 more comment
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
draft saved
draft discarded
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%2f53206828%2fcreate-a-circle-with-2-stroke%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
1
check this link stackoverflow.com/questions/35754734/…
– Znaneswar
Nov 8 at 11:34
I already try box-shadow but it's look like it don't have any effect on the element circle
– Kvasir
Nov 8 at 11:40
Try reuse your circle with
<use>and stroke the<use>element for the second stroke.– enxaneta
Nov 8 at 11:56
I can't add anything in the HTML.
– Kvasir
Nov 8 at 12:17
The problem is that you can't use
r:5; cx:0; cy:0;in your css You'll have to move at least the r in the SVG– enxaneta
Nov 8 at 12:36