I'm quite new to SVG animations and I am struggleing a bit with it.
I have written the below code to rotate an image around a center point. However, it is cutting off the top and left of the immage.
<svg width="350" height="350">
<g transform="translate(175, 175)">
<svg>
<g>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" begin="0" dur="500ms" repeatCount="1"></animateTransform>
<circle cx="0" cy="0" r="140" stroke="#70AD47" stroke-width="5" fill="#E2F0D6"></circle>
<text x="0" y="0" text-anchor="middle" dy="10" class="bubbleTitle" fill="#70AD47">Top</text>
<circle cx="0" cy="-120" r="50" stroke="#70AD47" stroke-width="3" fill="#E2F0D6"></circle>
<text x="0" y="-120" text-anchor="middle" dy="0">
<tspan font-size="14" class="bubbleText" x="0" dy="-1.5em">Sent</tspan>
<tspan font-size="40" class="bubbleText" x="0" dy="1.0em">#</tspan>
</text>
</g>
</svg>
</g>
</svg>
Any help with this would be hugely apreciated.
Thank you
The viewBox attribute is missing. If you set it properly the inner translation is no longer necessary.
Also remove the nested SVG element
<svg width="350" height="350" viewBox="-140 -175 280 350" xmlns="http://www.w3.org/2000/svg">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" begin="0" dur="500ms" repeatCount="1"></animateTransform>
<circle cx="0" cy="0" r="140" stroke="#70AD47" stroke-width="5" fill="#E2F0D6"></circle>
<text x="0" y="0" text-anchor="middle" dy="10" class="bubbleTitle" fill="#70AD47">Top</text>
<circle cx="0" cy="-120" r="50" stroke="#70AD47" stroke-width="3" fill="#E2F0D6"></circle>
<text x="0" y="-120" text-anchor="middle" dy="0">
<tspan font-size="14" class="bubbleText" x="0" dy="-1.5em">Sent</tspan>
<tspan font-size="40" class="bubbleText" x="0" dy="1.0em">#</tspan>
</text>
</svg>
I would like to have a good working approach for the following problem:
On a bar chart with bars filled with different but unknown colors, I would like to put labels with a fixed black color such that they are readable.
The approach I am searching for should look such as in the title bar of the window in the image. The label is black, it resides on top of a blurred white background which sits on top of the bar of any color.
Is there a way to do it with SVG filters?
Below are some approaches I tried:
.black {
fill: black;
}
.blue {
fill: blue;
}
.red {
fill: red;
}
.yellow {
fill: yellow;
}
.label{
fill: black;
font-size: 14px;
}
.label-background{
fill: white;
font-size: 16px;
}
.text-background{
paint-order: stroke;
stroke: #fff;
fill: black;
stroke-width: 5px;
}
.header{
font-size: 20px;
}
.background{
fill: white;
opacity: 0.6;
}
<svg width="500" height="500">
<defs>
<filter x="-0.05" y="-0.1" width="1.08" height="1.2" id="solid">
<feFlood flood-color="lightgrey"/>
<feComposite in="SourceGraphic" operator="xor" />
</filter>
</defs>
<g class="row-1" transform="translate(0,30)">
<text class="header" x="20" y="-10">text label on top of bar </text>
<g>
<rect class="black" width=100 height=30></rect>
<text class="label" x="20" y="20">my text label</text>
</g>
<g transform="translate(120,0)">
<rect class="blue" width=100 height=30></rect>
<text class="label" x="20" y="20">my text label</text>
</g>
<g transform="translate(240,0)">
<rect class="red" width=100 height=30></rect>
<text class="label" x="20" y="20">my text label</text>
</g>
<g transform="translate(360,0)">
<rect class="yellow" width=100 height=30></rect>
<text class="label" x="20" y="20">my text label</text>
</g>
</g>
<g class="row-2" transform="translate(0,100)">
<text class="header" x="20" y="-10">text label on top of rect.background on top of bar </text>
<g>
<rect class="black" width=100 height=30></rect>
<rect class="background" x=17 y=6 width=78 height=19></rect>
<text class="label" x="20" y="20">my text label</text>
</g>
<g transform="translate(120,0)">
<rect class="blue" width=100 height=30></rect>
<rect class="background" x=17 y=6 width=78 height=19></rect>
<text class="label" x="20" y="20">my text label</text>
</g>
<g transform="translate(240,0)">
<rect class="red" width=100 height=30></rect>
<rect class="background" x=17 y=6 width=78 height=19></rect>
<text class="label" x="20" y="20">my text label</text>
</g>
<g transform="translate(360,0)">
<rect class="yellow" width=100 height=30></rect>
<rect class="background" x=17 y=6 width=78 height=19></rect>
<text class="label" x="20" y="20">my text label</text>
</g>
</g>
<g class="row-3" transform="translate(0, 170)">
<text class="header" x="20" y="-10">text label with filter #solid on top of bar </text>
<g>
<rect class="black" width=100 height=30></rect>
<text class="label" filter="url(#solid)" x="20" y="20">my text label</text>
</g>
<g transform="translate(120,0)">
<rect class="blue" width=100 height=30></rect>
<text class="label" filter="url(#solid)" x="20" y="20">my text label</text>
</g>
<g transform="translate(240,0)">
<rect class="red" width=100 height=30></rect>
<text class="label" filter="url(#solid)" x="20" y="20">my text label</text>
</g>
<g transform="translate(360,0)">
<rect class="yellow" width=100 height=30></rect>
<text class="label" filter="url(#solid)" x="20" y="20">my text label</text>
</g>
</g>
<g class="row-4" transform="translate(0, 240)">
<text class="header" x="20" y="-10">text label on top of larger text label with background color on top of bar </text>
<g>
<rect class="black" width=100 height=30></rect>
<text class="label-background" x="18" y="22">my text label</text>
<text class="label" x="20" y="20">my text label</text>
</g>
<g transform="translate(120,0)">
<rect class="blue" width=100 height=30></rect>
<text class="label-background" x="18" y="22">my text label</text>
<text class="label" x="20" y="20">my text label</text>
</g>
<g transform="translate(240,0)">
<rect class="red" width=100 height=30></rect>
<text class="label-background" x="18" y="22">my text label</text>
<text class="label" x="20" y="20">my text label</text>
</g>
<g transform="translate(360,0)">
<rect class="yellow" width=100 height=30></rect>
<text class="label-background" x="18" y="22">my text label</text>
<text class="label" x="20" y="20">my text label</text>
</g>
</g>
<g class="row-5" transform="translate(0, 310)">
<text class="header" x="20" y="-10">text label with paint-order: stroke on top of bar </text>
<g>
<rect class="black" width=100 height=30></rect>
<text class="label text-background" x="20" y="20">my text label</text>
</g>
<g transform="translate(120,0)">
<rect class="blue" width=100 height=30></rect>
<text class="label text-background" x="20" y="20">my text label</text>
</g>
<g transform="translate(240,0)">
<rect class="red" width=100 height=30></rect>
<text class="label text-background" x="20" y="20">my text label</text>
</g>
<g transform="translate(360,0)">
<rect class="yellow" width=100 height=30></rect>
<text class="label text-background" x="20" y="20">my text label</text>
</g>
</g>
</svg>
Since you're asking for an SVG filter solution:
Start with SourceAlpha, which gives you a black silhouette of the element (i.e. the text), and then blur it with feGaussianBlur to create a soft shadow.
This shadow will be black, so use feColorMatrix to make it white.
Finally, put the original text on top of the shadow using feBlend.
References:
SVG Drop Shadows (see Example 3)
Finessing feColorMatrix
.black {
fill: black;
}
.blue {
fill: blue;
}
.red {
fill: red;
}
.yellow {
fill: yellow;
}
.label {
fill: black;
font-size: 14px;
}
<svg width="500" height="80" color-interpolation-filters="sRGB">
<defs>
<filter id="shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
<feColorMatrix in="blur" type="matrix" values="0 0 0 0 1
0 0 0 0 1
0 0 0 0 1
0 0 0 8 0" result="white" />
<feColorMatrix in="white" type="matrix" values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 .8 0" result="dim" />
<feBlend in="SourceGraphic" in2="dim" mode="normal" />
</filter>
</defs>
<g class="row-1" transform="translate(10,30)">
<text class="header" x="0" y="-10">feGaussianBlur on SourceAlpha</text>
<g>
<rect class="black" width=100 height=30></rect>
<text class="label" x="20" y="20" filter="url(#shadow)">my text label</text>
</g>
<g transform="translate(120,0)">
<rect class="blue" width=100 height=30></rect>
<text class="label" x="20" y="20" filter="url(#shadow)">my text label</text>
</g>
<g transform="translate(240,0)">
<rect class="red" width=100 height=30></rect>
<text class="label" x="20" y="20" filter="url(#shadow)">my text label</text>
</g>
<g transform="translate(360,0)">
<rect class="yellow" width=100 height=30></rect>
<text class="label" x="20" y="20" filter="url(#shadow)">my text label</text>
</g>
</g>
</svg>
Not thoroughly tested, but building up text-shadow with multiple values has the desired effect :
svg text {
text-shadow: 0px 0px 2px white,
0px 0px 4px white,
0px 0px 6px white,
0px 0px 8px white,
0px 0px 10px white;
}
Working example :
.black {
fill: black;
}
.blue {
fill: blue;
}
.red {
fill: red;
}
.yellow {
fill: yellow;
}
.label{
fill: black;
font-size: 14px;
}
svg g.row-1 text {
text-shadow: 0px 0px 2px white,
0px 0px 4px white,
0px 0px 6px white,
0px 0px 8px white,
0px 0px 10px white;
}
<svg width="500" height="500">
<defs>
<filter x="-0.05" y="-0.1" width="1.08" height="1.2" id="solid">
<feFlood flood-color="lightgrey"/>
<feComposite in="SourceGraphic" operator="xor" />
</filter>
</defs>
<g class="row-1" transform="translate(0,30)">
<g>
<rect class="black" width=100 height=30></rect>
<text class="label" x="20" y="20">my text label</text>
</g>
<g transform="translate(120,0)">
<rect class="blue" width=100 height=30></rect>
<text class="label" x="20" y="20">my text label</text>
</g>
<g transform="translate(240,0)">
<rect class="red" width=100 height=30></rect>
<text class="label" x="20" y="20">my text label</text>
</g>
<g transform="translate(360,0)">
<rect class="yellow" width=100 height=30></rect>
<text class="label" x="20" y="20">my text label</text>
</g>
</g>
</svg>
Why, in this SVG, can I change the stroke-width on hover, but not the stroke-color?
The problem is clearly presented in the snippet below.
The stroke-width:5; is seeing applied to all elements in the <g id="HOVERME_LEGEND_ABC">, while the stroke:blue; is seemingly just not applied to any.
MWE SNIPPET
#LEGEND_ABC{
cursor:pointer;
}
#LEFTTICKBOX_ABC{
stroke:black;
}
#COLOUREDBOX_ABC{
fill:yellow;
stroke:black;
}
#HOVERME_LEGEND_ABC:hover{
fill:#0000EE;
stroke-width:5;
stroke:blue;
}
<svg id="SVG"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="500"
height="70"
viewBox="-15 -45 500 70">
<g id="LEGEND_ABC">
<g id="HOVERME_LEGEND_ABC">
<rect id="LEFTTICKBOX_ABC"
x="0"
y="0"
width="15"
height="15">
</rect>
<use id="COLOUREDBOX_ABC"
x="30"
y="-5"
xlink:href="#LEGENDBOX">
</use>
<text id="TEXT_ABC"
x="65"
y="12.5">
Color me (why are the rectangles not being stroked blue?)
</text>
</g>
</g>
<defs id="DEFINITIONS">
<rect id="RECTANGLE_YELLOW"
width="42.5"
height="95">
</rect>
<rect id="LEGENDBOX"
x="0"
y="0"
width="25"
height="25">
</rect>
</defs>
</svg>
What I would like, is the whole contents of <g id="HOVERME_LEGEND_ABC"> being stroked blue on hovering over the group, regardless of what stroke-colors the individual objects have before hovering over the group.
Be more spesific... #HOVERME_LEGEND_ABC:hover #COLOUREDBOX_ABC
#LEGEND_ABC{
cursor:pointer;
}
#LEFTTICKBOX_ABC{
stroke:black;
}
#COLOUREDBOX_ABC{
fill:yellow;
stroke:black;
}
#HOVERME_LEGEND_ABC:hover{
fill:#0000EE;
stroke-width:5;
stroke:blue;
}
#HOVERME_LEGEND_ABC:hover #COLOUREDBOX_ABC{
fill:#0000EE;
stroke-width:5;
stroke:blue;
}
#HOVERME_LEGEND_ABC:hover #LEFTTICKBOX_ABC{
fill:#0000EE;
stroke-width:5;
stroke:blue;
}
<svg id="SVG"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="500"
height="70"
viewBox="-15 -45 500 70">
<g id="LEGEND_ABC">
<g id="HOVERME_LEGEND_ABC">
<rect id="LEFTTICKBOX_ABC"
x="0"
y="0"
width="15"
height="15">
</rect>
<use id="COLOUREDBOX_ABC"
x="30"
y="-5"
xlink:href="#LEGENDBOX">
</use>
<text id="TEXT_ABC"
x="65"
y="12.5">
Color me (why are the rectangles not being stroked blue?)
</text>
</g>
</g>
<defs id="DEFINITIONS">
<rect id="RECTANGLE_YELLOW"
width="42.5"
height="95">
</rect>
<rect id="LEGENDBOX"
x="0"
y="0"
width="25"
height="25">
</rect>
</defs>
</svg>
<clipPath id="clip1">
<rect x="10" y="222" height="30" width="50" rx="5" />
</clipPath>
<image .... clip-path="url(#clip1)" />
It cuts the outer space of the image. But I want to cut a hole into the image. How can I achieve it?
For your purposes, you can use a mask
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<rect x="50" y="50" height="50" width="100" rx="5" fill="black" />
</mask>
</defs>
<image x="0" y="0" width="200" height="200"
xlink:href="http://placeimg.com/200/200/any"
mask="url(#hole)" >
</image>
</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>