I am creating an ellipse in svg. In this ellipse I am trying to give a shape like a star or cross. I can not use anything else other than ellipse. This is what I have done so far.
<ellipse cx="96" cy="126" rx="5" ry="5" fill="#EF4444" stroke="#EF4444" stroke-width="19" stroke-dasharray="4" opacity="1" transform="translate(139 50)"></ellipse>
All I did is, added the stroke-dasharray="4" and it became like a cross. But it is not proper yet. Can anyone help me on this please.
This is how it looks like now. Which is not a star or a cross.
I am not entirely sure what you mean by
I can not use anything else other than ellipse
If you strictly follow that restriction, then your request would seem close to impossible.
Your first attempt is a nice idea, but unfortunately it may have issues. Creating circles or ellipses with stroke widths that are greater than the radius (technically, more than double the radius), can not always be trusted to render correctly.
The approach that Robert suggested is better and more flexible, but will require the use of SVG elements other than <ellipse>
For example take the following design.
svg {
width: 400px;
}
<svg viewBox="0 0 100 70">
<ellipse cx="50" cy="35" rx="40" ry="28"
fill="none" stroke="black" stroke-width="1"/>
<g class="cross">
<rect x="0" y="20" width="100" height="30" transform="rotate(35, 50,35)"/>
<rect x="0" y="20" width="100" height="30" transform="rotate(-35, 50,35)"/>
</g>
</svg>
If we turn the ellipse into a clip path, and apply it to the cross, we get this:
svg {
width: 400px;
}
<svg viewBox="0 0 100 70">
<defs>
<clipPath id="oval">
<ellipse cx="50" cy="35" rx="40" ry="28"/>
</clipPath>
</defs>
<g class="cross" clip-path="url(#oval)">
<rect x="0" y="20" width="100" height="30" transform="rotate(35, 50,35)"/>
<rect x="0" y="20" width="100" height="30" transform="rotate(-35, 50,35)"/>
</g>
</svg>
You can make the cross part look however you like, and still clip it with the ellipse.
Another idea. Cut a cross from a circle using four ellipses
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="400" viewBox="0 0 400 400" >
<circle cx="200" cy="200" r="100" fill="crimson" />
<circle cx="200" cy="200" r="40" fill="none" stroke="black" />
<circle cx="200" cy="200" r="2" fill="black" />
<polyline fill="none" stroke="black" points="0,0 400,400" />
<polyline fill="none" stroke="black" points="0,400 400,0" />
<ellipse transform="rotate(45 100 125)" cx="80" cy="107" rx="102" ry="50" fill="gold" opacity="0.5" />
<ellipse transform="translate(125 -20) rotate(135 100 125)" cx="45" cy="80" rx="100" ry="50" fill="gold" opacity="0.5" />
<ellipse transform="translate(125 -20) rotate(225 100 125)" cx="-90" cy="40" rx="100" ry="50" fill="gold" opacity="0.5" />
<ellipse transform="translate(125 -20) rotate(315 100 125)" cx="-125" cy="175" rx="100" ry="50" fill="gold" opacity="0.5" />
</svg>
Then you can use these ellipses as a mask.
.container {
width:75vw;
height:auto;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 50 400 400" preserveAspectRatio="xMinYMin meet">
<defs>
<mask id="msk">
<rect width="100%" height="100%" fill="white" />
<g id="group" fill="black">
<ellipse transform="rotate(45 100 125)" cx="80" cy="107" rx="102" ry="50" />
<ellipse transform="translate(125 -20) rotate(135 100 125)" cx="45" cy="80" rx="100" ry="50" />
<ellipse transform="translate(125 -20) rotate(225 100 125)" cx="-90" cy="40" rx="100" ry="50" />
<ellipse transform="translate(125 -20) rotate(315 100 125)" cx="-125" cy="175" rx="100" ry="50" />
</g>
</mask>
</defs>
<image href="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Foro_Romano.jpg/1200px-Foro_Romano.jpg "
width="100%" height="100%" />
<circle mask="url(#msk)" cx="200" cy="200" r="100" fill="crimson" opacity="0.7" />
</svg>
</div>
I'm trying to animate 3x Individual Circles within one SVG. I've got them to animate, but they have moved position into the top left corner. This happened when I added the following CSS:
.payment svg * {
transform-origin: center; /* or transform-origin: 50% */
transform-box: fill-box;
}
<div class="payment">
<svg width="689px" height="370px" viewBox="0 0 689 370" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 62 (91390) - https://sketch.com -->
<title>Circles</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#454545" offset="0%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" stroke="url(#linearGradient-1)">
<g id="Circles" transform="translate(1.000000, 1.000000)">
<g id="mini" transform="translate(0.000000, 60.000000)" opacity="0.50042" stroke-dasharray="3" transform="rotate(360)">
<path d="M127,254 C197.140163,254 254,197.140163 254,127 C254,56.8598368 197.140163,0 127,0 C56.8598368,0 0,56.8598368 0,127 C0,197.140163 56.8598368,254 127,254 Z" id="Oval"></path>
<animateTransform attributeName="transform" attributeType="XML" dur="15s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
</g>
<g id="small" transform="translate(135.000000, 30.000000)" opacity="0.5" stroke-dasharray="6,10" transform="rotate(360)">
<path d="M154,308 C239.051851,308 308,239.051851 308,154 C308,68.9481485 239.051851,0 154,0 C68.9481485,0 0,68.9481485 0,154 C0,239.051851 68.9481485,308 154,308 Z" id="Oval-Copy-3"></path>
<animateTransform attributeName="transform" attributeType="XML" dur="25s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
</g>
<g id="large" transform="translate(319.000000, 0.000000)" opacity="0.5" stroke-dasharray="16,10" transform="rotate(360)">
<path d="M184,368 C285.620394,368 368,285.620394 368,184 C368,82.379606 285.620394,0 184,0 C82.379606,0 0,82.379606 0,184 C0,285.620394 82.379606,368 184,368 Z" id="Oval-Copy-4"></path>
<animateTransform attributeName="transform" attributeType="XML" dur="35s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
</g>
</g>
</g>
</g>
</svg>
</div>
But without the above CSS, they do not stay in the same position and rotate.
Does anyone know how to keep them in the same position and rotate 360 without moving?
<svg width="689px" height="370px" viewBox="0 0 689 370" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 62 (91390) - https://sketch.com -->
<title>Circles</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#454545" offset="0%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" stroke="url(#linearGradient-1)">
<g id="Circles" transform="translate(1.000000, 1.000000)">
<g id="mini" transform="translate(0.000000, 60.000000)" opacity="0.50042" stroke-dasharray="3" transform="rotate(360)">
<path d="M127,254 C197.140163,254 254,197.140163 254,127 C254,56.8598368 197.140163,0 127,0 C56.8598368,0 0,56.8598368 0,127 C0,197.140163 56.8598368,254 127,254 Z" id="Oval"></path>
</g>
<g id="small" transform="translate(135.000000, 30.000000)" opacity="0.5" stroke-dasharray="6,10" transform="rotate(360)">
<path d="M154,308 C239.051851,308 308,239.051851 308,154 C308,68.9481485 239.051851,0 154,0 C68.9481485,0 0,68.9481485 0,154 C0,239.051851 68.9481485,308 154,308 Z" id="Oval-Copy-3"></path>
</g>
<g id="large" transform="translate(319.000000, 0.000000)" opacity="0.5" stroke-dasharray="16,10" transform="rotate(360)">
<path d="M184,368 C285.620394,368 368,285.620394 368,184 C368,82.379606 285.620394,0 184,0 C82.379606,0 0,82.379606 0,184 C0,285.620394 82.379606,368 184,368 Z" id="Oval-Copy-4"></path>
</g>
</g>
</g>
</g>
</svg>
main idea - rotation around origin(0,0) before translation:
<svg viewBox="-200 -100 400 200" width=90vw>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#454545" offset="0%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>
<g stroke-width="1" fill="none">
<g stroke="url(#linearGradient-1)">
<g opacity="0.5" stroke-dasharray="3" transform="translate(-100,0)" >
<circle r="80" >
<animateTransform attributeName="transform" attributeType="XML" dur="15s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
</circle>
</g>
<g stroke-dasharray="6,10">
<circle r="90">
<animateTransform attributeName="transform" attributeType="XML" dur="25s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
</circle>
</g>
<g opacity="0.5" stroke-dasharray="16,10" transform="translate(100,0)">
<circle r="100">
<animateTransform attributeName="transform" attributeType="XML" dur="35s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
</circle>
</g>
</g>
</g>
</svg>
<svg viewbox="0 0 100 100">
<defs>
<pattern
id="dotted-pattern"
viewbox="0,0,100,100"
height="3.125%"
width="3.125%">
<circle cx="50" cy="50" fill="#10446D" r="12">
<animate
attributeName="opacity"
values="0; 1"
keyTimes="0; 1"
dur="1s"
begin="0s"
repeatCount="1"
fill="freeze" />
</circle>
</pattern>
<mask id="circle-mask" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse">
<circle cx="50" cy="50" r="38.48" width="100" height="100" fill="white"></circle>
</mask>
</defs>
<rect
width="74"
height="74"
y="13"
x="13"
mask="url(#circle-mask)"
fill="url(#dotted-pattern)"></rect>
</svg>
This way animation runs simultaneously for all pattern items.
How to run this sequentially? Start next item animation if the previous one completed?
Instead of animating the circles of the pattern I would animate a radial gradient from white to black, and I would use this gradient to fill the mask circle like so:
<svg viewbox="0 0 100 100">
<defs>
<radialGradient id="rg" cx=".5" cy=".5" r="0.01">
<stop offset="0%" stop-color="white"></stop>
<stop offset="100%" stop-color="black"></stop>
<animate
attributeName="r"
values="0.01; 1"
dur="3s"
begin="0s"
repeatCount="1"
fill="freeze" />
</radialGradient>
<pattern
id="dotted-pattern"
viewbox="0,0,100,100"
height="3.125%"
width="3.125%">
<circle cx="50" cy="50" fill="#10446D" r="12"/>
</pattern>
<mask id="circle-mask" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse">
<circle id="kk" cx="50" cy="50" r="38.48" width="100" height="100" fill="url(#rg)">
</circle>
</mask>
</defs>
<rect
width="74"
height="74"
y="13"
x="13"
mask="url(#circle-mask)"
fill="url(#dotted-pattern)"></rect>
</svg>
SECOND Solution
You may fill the mask circle with white and animate the radius like so:
<svg viewbox="0 0 100 100">
<defs>
<pattern
id="dotted-pattern"
viewbox="0,0,100,100"
height="3.125%"
width="3.125%">
<circle cx="50" cy="50" fill="#10446D" r="12"/>
</pattern>
<mask id="circle-mask" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse">
<circle id="kk" cx="50" cy="50" r="38.48" width="100" height="100" fill="white">
<animate
attributeName="r"
values="0.01; 38.48"
dur="3s"
begin="0s"
repeatCount="1"
fill="freeze" />
</circle>
</mask>
</defs>
<rect
width="74"
height="74"
y="13"
x="13"
mask="url(#circle-mask)"
fill="url(#dotted-pattern)"></rect>
</svg>
This is my HTML:
<svg viewbox="0 0 33.83098862 33.83098862" width="400" height="400"
xmlns="http://www.w3.org/2000/svg">
<circle stroke="#efefef" stroke-width="2"
cx="16.91549431" cy="16.91549431" r="15.91549431" fill="url(#image1)"/>
<g >
<text x="16.91549431" y="15.5" alignment-baseline="central" text-anchor="middle" font-size="3">zzzzzzzzzzzzzzz</text>
<text x="16.91549431" y="17.5" alignment-baseline="central" text-anchor="middle" font-size="2">aaaaaaaaaaaaaaaa</text>
<text x="16.91549431" y="20.5" alignment-baseline="central" text-anchor="middle" font-size="1.5">qqqqqqqqqqqqqqq</text>
</g>
<defs>
<pattern width="10" height="10" patternUnits="userSpaceOnUse" y="0" x="0" id="image1">
<image xlink:href="http://images.clipartpanda.com/clipart-star-RTA9RqzTL.png" height="10" width="10" y="0" x="0"></image>
</pattern>
</defs>
</svg>
And I have got this
I need only one star beneath the qqqqqqqqqq text
The <pattern> element is for defining repeating fill patterns. If you just want to place a single image, just use the <image> element.
<svg viewbox="0 0 33.83098862 33.83098862" width="400" height="400"
xmlns="http://www.w3.org/2000/svg">
<circle stroke="#efefef" stroke-width="2"
cx="16.91549431" cy="16.91549431" r="15.91549431" fill="white"/>
<g >
<text x="16.91549431" y="15.5" alignment-baseline="central" text-anchor="middle" font-size="3">zzzzzzzzzzzzzzz</text>
<text x="16.91549431" y="17.5" alignment-baseline="central" text-anchor="middle" font-size="2">aaaaaaaaaaaaaaaa</text>
<text x="16.91549431" y="20.5" alignment-baseline="central" text-anchor="middle" font-size="1.5">qqqqqqqqqqqqqqq</text>
</g>
<image xlink:href="http://images.clipartpanda.com/clipart-star-RTA9RqzTL.png" height="10" width="10" y="21.5" x="11.9"></image>
</svg>
When I mouseover on grey rectangle I'm scale him
<defs>
<g id="rectangl">
<rect x="-0.5" y="-0.5" width="1" height="1" fill="grey" stroke-width="0.0" />
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="1.15" repeatCount="1" begin="mouseover" dur = "0.2s"
fill="freeze"/>
</g>
I'm try to add some figures like this:
<defs>
<g id="rectangl">
<rect x="-0.5" y="-0.5" width="1" height="1" fill="grey" stroke-width="0.0" />
**<line x1="-0.5" y1="-0.5" x2="-0.5" y2="0.5" stroke-width="0.05" stroke-linecap="round"/>
<circle cx="0.5" cy="0.0" r="0.05" stroke-width="0" /><!-- dot -->
<circle cx="-0.5" cy="0.0" r="0.05" fill="white" stroke-width="0.01" />**
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="1.15" repeatCount="1" begin="mouseover" dur = "0.2s"
fill="freeze"/>
</g>
After that mouse over on any of this figures - line, circle, rect - startanimation again while i'm staying into grey rectangle.
I need to scale up(+15%) while i'm mouse over on whole figure (id="rectangl") and scale down(-15%) only when I'm mouse out from whole figure.
My similar theme SVG Carefully scale hover-kind effect using animateTransform
Thank you for understanding
Text to open in html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:a="http://ns.adobe.com/adobesvgviewerextensions/3.0/"
x="0px" y="0px" width="800" height="600" viewBox="-400 -300 800 600" xml:space="preserve" font-family="arial" font-size="14">
<defs>
<g id="dscn.n" cursor="pointer">
<g id="rectangl">
<rect x="-0.5" y="-0.5" width="1" height="1" fill="grey" stroke-width="0.0" />
<line x1="-0.5" y1="-0.5" x2="-0.5" y2="0.5" stroke-width="0.05" stroke-linecap="round"/><!-- left vertical -->
<circle cx="0.5" cy="0.0" r="0.05" stroke-width="0" /><!-- dot -->
<circle cx="-0.5" cy="0.0" r="0.05" fill="white" stroke-width="0.01" />
<line x1="0.5" y1="0" x2="-0.15" y2="-0.5" stroke-width="0.05" stroke-linecap="round" /><!-- off -->
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="1.15" repeatCount="1" begin="mouseover" dur = "0.2s"
fill="freeze"/>
</g>
</g>
</defs>
<g transform="translate(-200,-200)" >
<title>dscn.n</title>
<g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
<use xlink:href="#dscn.n" />
</g>
</g>
</svg>
</body>
Add pointer-events="none" to the line and circle elements.