I have an SVG element which will be reused and will be of different size. As of now, I have to adjust viewbox manually to make it appear centre. Is there is any svg solution to centre irrespective of any size.
<svg width="200" height="200" viewbox="0 0 100 100" preserveAspectRatio="xMidYMid" fill="#000">
<use xlink:href="#home"></use>
</svg>
<svg width="200" height="200" viewbox="0 0 200 200">
<use xlink:href="#home"></use>
</svg>
<svg style="display:none">
<symbol id="home">
<path d="M12.3469758,5.06253201 L14.1823758,6.54832612 C14.2573758,6.61066436 14.3735758,6.64123789 14.4641758,6.64123789 C14.5781758,6.64123789 14.7043758,6.59299524 14.7833758,6.49928936 C14.9253758,6.33113495 14.9095758,6.08078936 14.7401758,5.94003201 L7.71597578,0.0913555356 C7.64157578,0.0294143591 7.55297578,0.000826123823 7.46277578,0.000230535587 C7.45637578,-0.000365052648 7.45037578,0.000429064999 7.44397578,3.20061754e-05 C7.43757578,0.000429064999 7.43137578,-0.000365052648 7.42497578,0.000230535587 C7.33477578,0.000826123823 7.24477578,0.0294143591 7.17037578,0.0913555356 L0.142975778,5.94003201 C-0.0262242219,6.08078936 -0.0484242219,6.33133348 0.0933757781,6.49928936 C0.172575778,6.59299524 0.285975778,6.64123789 0.400175778,6.64123789 C0.490975778,6.64123789 0.531975778,6.61086289 0.606975778,6.54832612 L1.94677578,5.39169377 L1.94677578,11.6271055 C1.94677578,12.4944805 2.85697578,13.2087894 3.74657578,13.2087894 L10.9465758,13.2087894 C11.7877758,13.2087894 12.3467758,12.5564217 12.3467758,11.6271055 L12.3469758,5.06253201 Z M10.9467758,12.4146717 L9.54697578,12.4146717 L4.94697578,12.4146717 L3.74677578,12.4146717 C3.30097578,12.4146717 2.74697578,12.0547379 2.74697578,11.6271055 L2.74697578,4.74766436 C2.74697578,4.74091436 2.79537578,4.73436289 2.79497578,4.72741436 L7.41997578,0.899370241 L11.6883758,4.48302465 C11.6245758,4.55330406 11.5471758,4.64542171 11.5471758,4.74766436 L11.5469758,11.6271055 C11.5469758,12.0513629 11.3849758,12.4146717 10.9467758,12.4146717 Z" id="Shape" fill-rule="nonzero"></path>
<path d="M8.25,7.5 L6,7.5 L6,12.75 L5.25,12.75 L5.25,7.125 C5.25,6.91789322 5.41789322,6.75 5.625,6.75 L6,6.75 L8.625,6.75 C8.83210678,6.75 9,6.91789322 9,7.125 L9,7.5 L9,7.875 C9,8.08210678 8.83210678,8.25 8.625,8.25 C8.41789322,8.25 8.25,8.08210678 8.25,7.875 L8.25,7.5 Z M8.625,9 C8.83210678,9 9,9.16789322 9,9.375 L9,12.375 C9,12.5821068 8.83210678,12.75 8.625,12.75 C8.41789322,12.75 8.25,12.5821068 8.25,12.375 L8.25,9.375 C8.25,9.16789322 8.41789322,9 8.625,9 Z" id="Combined-Shape"></path>
</symbol>
</svg>
Also refer the fiddle
Why not simply adjust the viewbox so that the icon take the full space of the svg then you control its size using height/width and for the alignement you use another div.
So you can easily control the size of the icon and the size of the box and center the SVG using any common techniques (I used flex in this case) and you don't have to change the viewbox each time:
svg {
border:1px solid;
}
.box {
width:200px;
height:200px;
border:1px solid red;
display:inline-flex;
vertical-align:top;
justify-content:center;
align-items:center;
}
<div class="box">
<svg width="50" height="50" viewbox="0 0 15 14" preserveAspectRatio="xMidYMid" fill="#000">
<use xlink:href="#home"></use>
</svg>
</div>
<div class="box">
<svg width="20" height="20" viewbox="0 0 15 14" preserveAspectRatio="xMidYMid" fill="#000">
<use xlink:href="#home"></use>
</svg>
</div>
<svg style="display:none;">
<symbol id="home" >
<path d="M12.3469758,5.06253201 L14.1823758,6.54832612 C14.2573758,6.61066436 14.3735758,6.64123789 14.4641758,6.64123789 C14.5781758,6.64123789 14.7043758,6.59299524 14.7833758,6.49928936 C14.9253758,6.33113495 14.9095758,6.08078936 14.7401758,5.94003201 L7.71597578,0.0913555356 C7.64157578,0.0294143591 7.55297578,0.000826123823 7.46277578,0.000230535587 C7.45637578,-0.000365052648 7.45037578,0.000429064999 7.44397578,3.20061754e-05 C7.43757578,0.000429064999 7.43137578,-0.000365052648 7.42497578,0.000230535587 C7.33477578,0.000826123823 7.24477578,0.0294143591 7.17037578,0.0913555356 L0.142975778,5.94003201 C-0.0262242219,6.08078936 -0.0484242219,6.33133348 0.0933757781,6.49928936 C0.172575778,6.59299524 0.285975778,6.64123789 0.400175778,6.64123789 C0.490975778,6.64123789 0.531975778,6.61086289 0.606975778,6.54832612 L1.94677578,5.39169377 L1.94677578,11.6271055 C1.94677578,12.4944805 2.85697578,13.2087894 3.74657578,13.2087894 L10.9465758,13.2087894 C11.7877758,13.2087894 12.3467758,12.5564217 12.3467758,11.6271055 L12.3469758,5.06253201 Z M10.9467758,12.4146717 L9.54697578,12.4146717 L4.94697578,12.4146717 L3.74677578,12.4146717 C3.30097578,12.4146717 2.74697578,12.0547379 2.74697578,11.6271055 L2.74697578,4.74766436 C2.74697578,4.74091436 2.79537578,4.73436289 2.79497578,4.72741436 L7.41997578,0.899370241 L11.6883758,4.48302465 C11.6245758,4.55330406 11.5471758,4.64542171 11.5471758,4.74766436 L11.5469758,11.6271055 C11.5469758,12.0513629 11.3849758,12.4146717 10.9467758,12.4146717 Z" id="Shape" fill-rule="nonzero"></path>
<path d="M8.25,7.5 L6,7.5 L6,12.75 L5.25,12.75 L5.25,7.125 C5.25,6.91789322 5.41789322,6.75 5.625,6.75 L6,6.75 L8.625,6.75 C8.83210678,6.75 9,6.91789322 9,7.125 L9,7.5 L9,7.875 C9,8.08210678 8.83210678,8.25 8.625,8.25 C8.41789322,8.25 8.25,8.08210678 8.25,7.875 L8.25,7.5 Z M8.625,9 C8.83210678,9 9,9.16789322 9,9.375 L9,12.375 C9,12.5821068 8.83210678,12.75 8.625,12.75 C8.41789322,12.75 8.25,12.5821068 8.25,12.375 L8.25,9.375 C8.25,9.16789322 8.41789322,9 8.625,9 Z" id="Combined-Shape"></path>
</symbol>
</svg>
svg{
margin: auto;
}
.content {
width:200px;
height:200px;
border:1px solid #ececec;
display:inline-flex;
align-items:center;
}
<div class="content">
<svg width="60" height="60" viewbox="0 0 15 14" preserveAspectRatio="xMidYMid" fill="#000">
<use xlink:href="#home"></use>
</svg>
</div>
<div class="box">
<svg width="20" height="20" viewbox="0 0 15 14" preserveAspectRatio="xMidYMid" fill="#000">
<use xlink:href="#home"></use>
</svg>
</div>
<svg style="display:none;">
<symbol id="home" >
<path d="M12.3469758,5.06253201 L14.1823758,6.54832612 C14.2573758,6.61066436 14.3735758,6.64123789 14.4641758,6.64123789 C14.5781758,6.64123789 14.7043758,6.59299524 14.7833758,6.49928936 C14.9253758,6.33113495 14.9095758,6.08078936 14.7401758,5.94003201 L7.71597578,0.0913555356 C7.64157578,0.0294143591 7.55297578,0.000826123823 7.46277578,0.000230535587 C7.45637578,-0.000365052648 7.45037578,0.000429064999 7.44397578,3.20061754e-05 C7.43757578,0.000429064999 7.43137578,-0.000365052648 7.42497578,0.000230535587 C7.33477578,0.000826123823 7.24477578,0.0294143591 7.17037578,0.0913555356 L0.142975778,5.94003201 C-0.0262242219,6.08078936 -0.0484242219,6.33133348 0.0933757781,6.49928936 C0.172575778,6.59299524 0.285975778,6.64123789 0.400175778,6.64123789 C0.490975778,6.64123789 0.531975778,6.61086289 0.606975778,6.54832612 L1.94677578,5.39169377 L1.94677578,11.6271055 C1.94677578,12.4944805 2.85697578,13.2087894 3.74657578,13.2087894 L10.9465758,13.2087894 C11.7877758,13.2087894 12.3467758,12.5564217 12.3467758,11.6271055 L12.3469758,5.06253201 Z M10.9467758,12.4146717 L9.54697578,12.4146717 L4.94697578,12.4146717 L3.74677578,12.4146717 C3.30097578,12.4146717 2.74697578,12.0547379 2.74697578,11.6271055 L2.74697578,4.74766436 C2.74697578,4.74091436 2.79537578,4.73436289 2.79497578,4.72741436 L7.41997578,0.899370241 L11.6883758,4.48302465 C11.6245758,4.55330406 11.5471758,4.64542171 11.5471758,4.74766436 L11.5469758,11.6271055 C11.5469758,12.0513629 11.3849758,12.4146717 10.9467758,12.4146717 Z" id="Shape" fill-rule="nonzero"></path>
<path d="M8.25,7.5 L6,7.5 L6,12.75 L5.25,12.75 L5.25,7.125 C5.25,6.91789322 5.41789322,6.75 5.625,6.75 L6,6.75 L8.625,6.75 C8.83210678,6.75 9,6.91789322 9,7.125 L9,7.5 L9,7.875 C9,8.08210678 8.83210678,8.25 8.625,8.25 C8.41789322,8.25 8.25,8.08210678 8.25,7.875 L8.25,7.5 Z M8.625,9 C8.83210678,9 9,9.16789322 9,9.375 L9,12.375 C9,12.5821068 8.83210678,12.75 8.625,12.75 C8.41789322,12.75 8.25,12.5821068 8.25,12.375 L8.25,9.375 C8.25,9.16789322 8.41789322,9 8.625,9 Z" id="Combined-Shape"></path>
</symbol>
</svg>
Related
Hi i am trying to create a 'pin' on a SVG map of the whole world, the SVG is build with path elements, my thought was to use a before or after element and show the pin accordingly.
Apparently it is not showing on the path element, i can see it in the debugger/console and if i put it on a div element it works fine and shows up, i have cut out all countries except the first one in the SVG for simplicity.
CSS
.map-pin::after{
content: url('pin.svg');
background-size: 30px 30px;
background-repeat: no-repeat;
background-position: left top;
width: 30px;
height: 30px;
z-index: 10;
font-size: 1px;
display: inline-block;
position: absolute;
left: -999px;
top: -999px;
/*display: none;*/
}
.map-pin.active::after{
display: block;
}
.map-pin.active[data-id="AF"]::after{
top: 0;
left: 0;
}
SVG
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" style="stroke-linejoin: round; stroke:#000; fill: none;" viewBox="0 0 2000 1001" id="svg2" inkscape:version="0.48.4 r9939" sodipodi:docname="world.svg">
<defs id="defs4">
<style type="text/css" id="style6">path { fill-rule: evenodd; }</style>
</defs>
<g id="countries">
<path id="AF" data-name="Afghanistan" data-id="AF" class="map-pin active" d="m 1369.9,333.8 -5.4,0 -3.8,-0.5 -2.5,2.9 -2.1,0.7 -1.5,1.3 -2.6,-2.1 -1,-5.4 -1.6,-0.3 0,-2 -3.2,-1.5 -1.7,2.3 0.2,2.6 -0.6,0.9 -3.2,-0.1 -0.9,3 -2.1,-1.3 -3.3,2.1 -1.8,-0.8 -4.3,-1.4 -2.9,0 -1.6,-0.2 -2.9,-1.7 -0.3,2.3 -4.1,1.2 0.1,5.2 -2.5,2 -4,0.9 -0.4,3 -3.9,0.8 -5.9,-2.4 -0.5,8 -0.5,4.7 2.5,0.9 -1.6,3.5 2.7,5.1 1.1,4 4.3,1.1 1.1,4 -3.9,5.8 9.6,3.2 5.3,-0.9 3.3,0.8 0.9,-1.4 3.8,0.5 6.6,-2.6 -0.8,-5.4 2.3,-3.6 4,0 0.2,-1.7 4,-0.9 2.1,0.6 1.7,-1.8 -1.1,-3.8 1.5,-3.8 3,-1.6 -3,-4.2 5.1,0.2 0.9,-2.3 -0.8,-2.5 2,-2.7 -1.4,-3.2 -1.9,-2.8 2.4,-2.8 5.3,-1.3 5.8,-0.8 2.4,-1.2 2.8,-0.7 -1.4,-1.9 z" style="fill:#f2f2f2;fill-rule:evenodd"></path>
</g>
</svg>
I also tried a more simple way by just adding an element inside the SVG after all the path elements, but this breaks the whole SVG.
Anyone able to help me out here, is it not possible in SVG path elements? and if so, what other options am i left with?
PIN:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" style="enable-background:new 0 0 512 512;" viewBox="0 0 512 512" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#454545;stroke-width:18;stroke-miterlimit:10;}
</style>
<g>
<g id="XMLID_4245_">
<path class="st0" d="M389.3,208.7c0-73.6-59.7-133.3-133.3-133.3c-73.6,0-133.3,59.7-133.3,133.3 c0,32.6,12.1,62,31.5,85.1l55.3,75.4l46.6,67.5l101.8-142.9C377.2,270.7,389.3,241.2,389.3,208.7z" id="XMLID_4247_"></path>
<path class="st0" d="M311,170.9L311,170.9c-12.1-11.6-31.7-11.6-43.8,0l-10.9,10.5L245.3,171 c-12.1-11.6-31.7-11.6-43.8,0c-12.1,11.6-12.1,30.4,0,42l54.7,52.5L311,213C323.1,201.4,323.1,182.6,311,170.9z" id="XMLID_4246_"></path>
</g>
</g>
</svg>
As I've commented you can't have a before pseudo element for a path. However in your case you can have a symbol for the pin and use it at the end of your document. This way it will stay above all the other paths. (a z-index won't work either in SVG).
If you are using a symbol with a viewBox attribute you can give the <use> element a position (x and y attributes) and a size (width and height attributes)
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" style="stroke-linejoin: round; stroke:#000; fill: none;" viewBox="1280 320 100 100" id="svg2" >
<defs id="defs4">
<style type="text/css" id="style6">path { fill-rule: evenodd; }</style>
</defs>
<symbol id="map-pin-after" viewBox="0 0 30 30">
<circle cx="15" cy="8" r="8" /> <polygon points="15,30 22.7,10 7.3,10 15,30"/>
</symbol>
<g id="countries">
<path id="AF" data-name="Afghanistan" data-id="AF" class="map-pin active" d="m 1369.9,333.8 -5.4,0 -3.8,-0.5 -2.5,2.9 -2.1,0.7 -1.5,1.3 -2.6,-2.1 -1,-5.4 -1.6,-0.3 0,-2 -3.2,-1.5 -1.7,2.3 0.2,2.6 -0.6,0.9 -3.2,-0.1 -0.9,3 -2.1,-1.3 -3.3,2.1 -1.8,-0.8 -4.3,-1.4 -2.9,0 -1.6,-0.2 -2.9,-1.7 -0.3,2.3 -4.1,1.2 0.1,5.2 -2.5,2 -4,0.9 -0.4,3 -3.9,0.8 -5.9,-2.4 -0.5,8 -0.5,4.7 2.5,0.9 -1.6,3.5 2.7,5.1 1.1,4 4.3,1.1 1.1,4 -3.9,5.8 9.6,3.2 5.3,-0.9 3.3,0.8 0.9,-1.4 3.8,0.5 6.6,-2.6 -0.8,-5.4 2.3,-3.6 4,0 0.2,-1.7 4,-0.9 2.1,0.6 1.7,-1.8 -1.1,-3.8 1.5,-3.8 3,-1.6 -3,-4.2 5.1,0.2 0.9,-2.3 -0.8,-2.5 2,-2.7 -1.4,-3.2 -1.9,-2.8 2.4,-2.8 5.3,-1.3 5.8,-0.8 2.4,-1.2 2.8,-0.7 -1.4,-1.9 z" fill="#f2f2f2"></path>
</g>
<use xlink:href="#map-pin-after" stroke="none" fill="red" width="30" height="30" x="1310" y="327"/>
</svg>
UPDATE
An update where I'm using the OP's pin:
Since the new pin is not a square, and in order to preserve the aspect ratio, I had to recalculate the height of the pin.
<svg viewBox="1280 320 100 100" >
<defs>
<symbol id="map-pin-after" viewBox="111 60 290 397">
<g id="XMLID_4245_" fill="none" stroke="#454545" stroke-width="18" stroke-mitterlimit="10">
<path d="M389.3,208.7c0-73.6-59.7-133.3-133.3-133.3c-73.6,0-133.3,59.7-133.3,133.3 c0,32.6,12.1,62,31.5,85.1l55.3,75.4l46.6,67.5l101.8-142.9C377.2,270.7,389.3,241.2,389.3,208.7z" ></path>
<path d="M311,170.9L311,170.9c-12.1-11.6-31.7-11.6-43.8,0l-10.9,10.5L245.3,171 c-12.1-11.6-31.7-11.6-43.8,0c-12.1,11.6-12.1,30.4,0,42l54.7,52.5L311,213C323.1,201.4,323.1,182.6,311,170.9z" ></path>
</g>
</symbol>
</defs>
<g id="countries">
<path id="AF" data-name="Afghanistan" data-id="AF" class="map-pin active" d="m 1369.9,333.8 -5.4,0 -3.8,-0.5 -2.5,2.9 -2.1,0.7 -1.5,1.3 -2.6,-2.1 -1,-5.4 -1.6,-0.3 0,-2 -3.2,-1.5 -1.7,2.3 0.2,2.6 -0.6,0.9 -3.2,-0.1 -0.9,3 -2.1,-1.3 -3.3,2.1 -1.8,-0.8 -4.3,-1.4 -2.9,0 -1.6,-0.2 -2.9,-1.7 -0.3,2.3 -4.1,1.2 0.1,5.2 -2.5,2 -4,0.9 -0.4,3 -3.9,0.8 -5.9,-2.4 -0.5,8 -0.5,4.7 2.5,0.9 -1.6,3.5 2.7,5.1 1.1,4 4.3,1.1 1.1,4 -3.9,5.8 9.6,3.2 5.3,-0.9 3.3,0.8 0.9,-1.4 3.8,0.5 6.6,-2.6 -0.8,-5.4 2.3,-3.6 4,0 0.2,-1.7 4,-0.9 2.1,0.6 1.7,-1.8 -1.1,-3.8 1.5,-3.8 3,-1.6 -3,-4.2 5.1,0.2 0.9,-2.3 -0.8,-2.5 2,-2.7 -1.4,-3.2 -1.9,-2.8 2.4,-2.8 5.3,-1.3 5.8,-0.8 2.4,-1.2 2.8,-0.7 -1.4,-1.9 z" fill="#f2f2f2" stroke="black"></path>
</g>
<use xlink:href="#map-pin-after" stroke="none" fill="red" width="41" height="30" x="1305" y="327"/>
</svg>
The initial SVG figure with pattern:
<svg width="200" height="200" viewBox="0 0 100 100">
<defs>
<pattern id="img-dotted-dots" x="0" y="0" height=".08" width="7.69%">
<circle cx="2" cy="2" fill="white" r="0.8"></circle>
</pattern>
<mask id="img-dotted-mask">
<rect width="100" height="100" fill="url(#img-dotted-dots)"></rect>
</mask>
</defs>
<path d="M0 0 H 100 V 100 H 0 Z" mask="url(#img-dotted-mask)" fill="#1063B1"></path>
</svg>
Need to achieve:
One instance of the SVG figure with pattern for refferencing with CSS as clip-path.
I have tried to create SVG clipPath element and bind to CSS clip-path by this way
.figure {
width: 300px;
height: 300px;
clip-path: url(#img-dotted-clip-path);
background-color: #1063B1;
}
<div class="figure"></div>
<svg width="0" height="0" viewBox="0 0 100 100">
<defs>
<clipPath
clipPathUnits="objectBoundingBox"
id="img-dotted-clip-path">
<pattern
patternUnits="objectBoundingBox"
patternContentUnits="objectBoundingBox"
x="0" y="0" height="0.1" width="0.1">
<circle cx="0" cy="0" fill="white" r="0.5"></circle>
</pattern>
</clipPath>
</defs>
</svg>
Nothing happens.
Expected result - the same as the previous snippet.
For comparing:
If I use SVG rect - CSS clip-path works.
If pattern - doesn't
.figure {
width: 300px;
height: 300px;
clip-path: url(#img-dotted-clip-path);
background-color: #1063B1;
}
<div class="figure"></div>
<svg width="0" height="0" viewBox="0 0 100 100">
<defs>
<clipPath
clipPathUnits="objectBoundingBox"
id="img-dotted-clip-path">
<rect width="1" height="1"></rect>
</clipPath>
</defs>
</svg>
The only things that are valid inside a clip path are:
Shape elements (‘circle’, ‘ellipse’, ‘line’, ‘path’, ‘polygon’, ‘polyline’, ‘rect’)
‘text’
‘use’
Plus you can use animation elements etc to animate the clip path. However, only the shapes of those elements are used. Effects such as patterns, filters, etc are ignored.
The only way you could get the effect you want to work as a clipping path would be to add numerous <circle> elements to your <clipPath>.
<clipPath>
<circle>
<circle>
<circle>
<circle>
... etc ...
</clipPath>
But you could use a mask instead. Masks allow patterns.
.figure {
width: 300px;
height: 300px;
-webkit-mask: url(#img-dotted-mask);
mask: url(#img-dotted-mask);
background-color: #1063B1;
}
<p>This only works in Firefox</p>
<div class="figure"></div>
<svg width="0" height="0">
<defs>
<pattern id="img-dotted-pattern"
viewBox="0 0 1 1"
patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
<rect width="1" height="1" fill="black"/>
<circle cx="0.5" cy="0.5" fill="white" r="0.15"></circle>
</pattern>
<mask id="img-dotted-mask">
<rect width="2000" height="2000" fill="url(#img-dotted-pattern)"/>
</mask>
</defs>
</svg>
However inline SVG masks applied to HTML elements, like my example above, only work in Firefox. To get an SVG mask to work in Chrome, you would need to use mask or mask-image with an external or Data URL (as Temani has done in their answer).
You can recreate the same thing using mask combined with radial-gradient
.figure {
width: 300px;
height: 300px;
background:linear-gradient(to right,red,#1063B1);
/*radius here size here*/
-webkit-mask:radial-gradient(3px, #fff 97%,transparent 100%) 0 0/20px 20px;
mask:radial-gradient(3px, #fff 97%,transparent 100%) 0 0/20px 20px;
}
body {
background:#f2f2f2;
}
<div class="figure"></div>
Or consider the SVG inside the mask property. Make sure to escape the # and correctly set the viewbox and width/height to have a perfect repeat
.figure {
width: 300px;
height: 300px;
background:linear-gradient(to right,red,#1063B1);
-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="192" viewBox="0 0 100 90"><defs><pattern id="img-dotted-dots" x="0" y="0" height=".08" width="7.69%"><circle cx="2" cy="2" fill="white" r="0.8"></circle></pattern><mask id="img-dotted-mask"><rect width="100" height="100" fill="url(%23img-dotted-dots)"></rect></mask></defs><path d="M0 0 H 100 V 100 H 0 Z" mask="url(%23img-dotted-mask)" fill="%231063B1"></path></svg>');
mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="192" viewBox="0 0 100 90"><defs><pattern id="img-dotted-dots" x="0" y="0" height=".08" width="7.69%"><circle cx="2" cy="2" fill="white" r="0.8"></circle></pattern><mask id="img-dotted-mask"><rect width="100" height="100" fill="url(%23img-dotted-dots)"></rect></mask></defs><path d="M0 0 H 100 V 100 H 0 Z" mask="url(%23img-dotted-mask)" fill="%231063B1"></path></svg>');
}
body {
background:#f2f2f2;
}
<div class="figure"></div>
I'm trying to change the fill colour on an SVG symbol when it is inside a <use> element. Because there are going to be multiple instances of the symbol on the page, I can't do this is the <symbol> element, because the different instances of <use> will be different colours.
I've can't seem to get it work though. In the example below I would like to the bottom instance to be a blue twitter icon.
In the CSS I've done #bottom-twitter svg path {fill:blue;} which doesn't work. And I can't seem to get anything to work.
Any help would be amazing.
#box1 {
height: 5rem;
width: 5rem;
}
/* NOT WORKING */
#bottom-twitter svg path {
fill:blue;
}
<svg id="twitter" style="display: none;">
<defs>
<symbol id="twitter-symbol" viewBox="0 0 19.19 15.95">
<path id="twitter-path" d="M19.19,1.92a8.76,8.76,0,0,1-2.28.64A3.9,3.9,0,0,0,18.63.32a6.87,6.87,0,0,1-2.52,1A3.87,3.87,0,0,0,13.23,0,4,4,0,0,0,9.32,4,3.41,3.41,0,0,0,9.44,5,11,11,0,0,1,1.32.72a4.29,4.29,0,0,0-.52,2A4,4,0,0,0,2.56,6.12,3.61,3.61,0,0,1,.76,5.6v0a4,4,0,0,0,3.16,4,4.35,4.35,0,0,1-1,.16,4.9,4.9,0,0,1-.76-.08,4,4,0,0,0,3.68,2.8A7.79,7.79,0,0,1,.92,14.19a6.78,6.78,0,0,1-.92,0A10.83,10.83,0,0,0,6,16c7.24,0,11.19-6.16,11.19-11.47V4a6.83,6.83,0,0,0,2-2">
</path>
</symbol>
</defs>
</svg>
<div class="box" id="box1">
<svg id="top-twitter" viewBox="0 0 19.19 15.95">
<use xlink:href="#twitter-symbol"/>
</svg>
<svg id="bottom-twitter" viewBox="0 0 19.19 15.95">
<use xlink:href="#twitter-symbol"/>
</svg>
</div>
The problem is the fill="#000" in the svg path. Remove that or just change it to be the color you want.
#box1 {
height: 5rem;
width: 5rem;
}
/* NOT WORKING */
#bottom-twitter {
fill: blue;
}
<svg id="twitter" style="display: none;">
<defs>
<symbol id="twitter-symbol" viewBox="0 0 19.19 15.95">
<path id="twitter-path" d="M19.19,1.92a8.76,8.76,0,0,1-2.28.64A3.9,3.9,0,0,0,18.63.32a6.87,6.87,0,0,1-2.52,1A3.87,3.87,0,0,0,13.23,0,4,4,0,0,0,9.32,4,3.41,3.41,0,0,0,9.44,5,11,11,0,0,1,1.32.72a4.29,4.29,0,0,0-.52,2A4,4,0,0,0,2.56,6.12,3.61,3.61,0,0,1,.76,5.6v0a4,4,0,0,0,3.16,4,4.35,4.35,0,0,1-1,.16,4.9,4.9,0,0,1-.76-.08,4,4,0,0,0,3.68,2.8A7.79,7.79,0,0,1,.92,14.19a6.78,6.78,0,0,1-.92,0A10.83,10.83,0,0,0,6,16c7.24,0,11.19-6.16,11.19-11.47V4a6.83,6.83,0,0,0,2-2" >
</path>
</symbol>
</defs>
</svg>
<div class="box" id="box1">
<svg id="top-twitter" viewBox="0 0 19.19 15.95">
<use xlink:href="#twitter-symbol"/>
</svg>
<svg id="bottom-twitter" viewBox="0 0 19.19 15.95">
<use xlink:href="#twitter-symbol"/>
</svg>
</div>
I'm displaying my SVG using use tag. I have all fill property in a separate class. On some event i will be need to change SVG elements colour. But unable to change the color. Don't know what mistake i'm into.
.red{
fill:red;
}
.overwrite .red{
fill:blue;
}
<div class="overwrite">
<svg width="18" height="18" viewBox="0 0 18 18">
<use xlink:href="#owned"></use>
</svg>
</div>
<svg width="18" height="18" viewBox="0 0 18 18" style="display:none" ><g id="owned" class="red">
<path d="M10.3841197,9.97075733 L13.2351431,11.4015266 C14.9626648,11.9616921 15.8309505,12.9557364 15.9891455,14.4719879 C16.0178014,14.7466403 15.8183819,14.9925193 15.5437298,15.0211745 C15.5264933,15.0229729 15.5091749,15.0238739 15.4918448,15.0238739 L2.51884261,15.0238739 C2.24273586,15.0238522 2.01888584,14.7999955 2.01888584,14.5238739 C2.01888584,14.5045273 2.0200088,14.4851971 2.02224906,14.4659807 C2.19872996,12.9521713 3.06467543,11.9595935 4.69306731,11.4301408 L7.61375396,9.97075733 L7.1652223,9.07699038 L4.31419892,10.5077596 C2.39480463,11.1258644 1.25218198,12.4355796 1.02897609,14.3501842 C1.02225492,14.4078368 1.01888584,14.4658309 1.01888584,14.5238739 C1.01888584,15.3522606 1.69041424,16.023809 2.51880347,16.0238739 L9.09090532,16.0238739 L15.4918448,16.0238739 C15.543835,16.0238739 15.59579,16.0211709 15.6474995,16.0157759 C16.4714553,15.9298101 17.0697142,15.1921727 16.9837468,14.3682171 C16.7828597,12.4427753 15.6331205,11.126513 13.6120656,10.4785171 L10.8326513,9.07699038 L10.3841197,9.97075733 Z"/>
<path d="M11.9769889,4.48241206 C11.9769889,2.54800219 10.807176,1.5 8.97698892,1.5 C7.12089292,1.5 5.97698892,2.53355002 5.97698892,4.48241206 C5.97698892,6.87094598 7.51565932,9.5 8.97698892,9.5 C10.4383185,9.5 11.9769889,6.87094598 11.9769889,4.48241206 Z M12.9769889,4.48241206 C12.9769889,7.3505461 11.1337512,10.5 8.97698892,10.5 C6.82022662,10.5 4.97698892,7.3505461 4.97698892,4.48241206 C4.97698892,1.9573661 6.58996061,0.5 8.97698892,0.5 C11.3364486,0.5 12.9769889,1.96971351 12.9769889,4.48241206 Z"/>
</g>
</svg>
Refer sample code attached above
PS: Check the .overwrite class is not working.
Refer fiddle
use tag usually creates shadow root. You can't access class inside the shadow root. Instead try adding class .red to use tag.
.red{
fill:red;
}
.overwrite .red{
fill:blue;
}
<div class="overwrite">
<svg width="18" height="18" viewBox="0 0 18 18">
<use xlink:href="#owned" class="red"></use>
</svg>
</div>
<svg width="18" height="18" viewBox="0 0 18 18" style="display:none">
<g id="owned">
<path d="M10.3841197,9.97075733 L13.2351431,11.4015266 C14.9626648,11.9616921 15.8309505,12.9557364 15.9891455,14.4719879 C16.0178014,14.7466403 15.8183819,14.9925193 15.5437298,15.0211745 C15.5264933,15.0229729 15.5091749,15.0238739 15.4918448,15.0238739 L2.51884261,15.0238739 C2.24273586,15.0238522 2.01888584,14.7999955 2.01888584,14.5238739 C2.01888584,14.5045273 2.0200088,14.4851971 2.02224906,14.4659807 C2.19872996,12.9521713 3.06467543,11.9595935 4.69306731,11.4301408 L7.61375396,9.97075733 L7.1652223,9.07699038 L4.31419892,10.5077596 C2.39480463,11.1258644 1.25218198,12.4355796 1.02897609,14.3501842 C1.02225492,14.4078368 1.01888584,14.4658309 1.01888584,14.5238739 C1.01888584,15.3522606 1.69041424,16.023809 2.51880347,16.0238739 L9.09090532,16.0238739 L15.4918448,16.0238739 C15.543835,16.0238739 15.59579,16.0211709 15.6474995,16.0157759 C16.4714553,15.9298101 17.0697142,15.1921727 16.9837468,14.3682171 C16.7828597,12.4427753 15.6331205,11.126513 13.6120656,10.4785171 L10.8326513,9.07699038 L10.3841197,9.97075733 Z"/>
<path d="M11.9769889,4.48241206 C11.9769889,2.54800219 10.807176,1.5 8.97698892,1.5 C7.12089292,1.5 5.97698892,2.53355002 5.97698892,4.48241206 C5.97698892,6.87094598 7.51565932,9.5 8.97698892,9.5 C10.4383185,9.5 11.9769889,6.87094598 11.9769889,4.48241206 Z M12.9769889,4.48241206 C12.9769889,7.3505461 11.1337512,10.5 8.97698892,10.5 C6.82022662,10.5 4.97698892,7.3505461 4.97698892,4.48241206 C4.97698892,1.9573661 6.58996061,0.5 8.97698892,0.5 C11.3364486,0.5 12.9769889,1.96971351 12.9769889,4.48241206 Z"/>
</g>
</svg>
You are doing all right just end your <div class="overwrite"> bit early . Just end </div> tag at the end :)
.red{
fill:red;
}
.overwrite .red{
fill:blue;
}
<div class="overwrite">
<svg width="18" height="18" viewBox="0 0 18 18">
<use xlink:href="#owned"></use>
</svg>
<svg width="18" height="18" viewBox="0 0 18 18" style="display:none" ><g id="owned" class="red">
<path d="M10.3841197,9.97075733 L13.2351431,11.4015266 C14.9626648,11.9616921 15.8309505,12.9557364 15.9891455,14.4719879 C16.0178014,14.7466403 15.8183819,14.9925193 15.5437298,15.0211745 C15.5264933,15.0229729 15.5091749,15.0238739 15.4918448,15.0238739 L2.51884261,15.0238739 C2.24273586,15.0238522 2.01888584,14.7999955 2.01888584,14.5238739 C2.01888584,14.5045273 2.0200088,14.4851971 2.02224906,14.4659807 C2.19872996,12.9521713 3.06467543,11.9595935 4.69306731,11.4301408 L7.61375396,9.97075733 L7.1652223,9.07699038 L4.31419892,10.5077596 C2.39480463,11.1258644 1.25218198,12.4355796 1.02897609,14.3501842 C1.02225492,14.4078368 1.01888584,14.4658309 1.01888584,14.5238739 C1.01888584,15.3522606 1.69041424,16.023809 2.51880347,16.0238739 L9.09090532,16.0238739 L15.4918448,16.0238739 C15.543835,16.0238739 15.59579,16.0211709 15.6474995,16.0157759 C16.4714553,15.9298101 17.0697142,15.1921727 16.9837468,14.3682171 C16.7828597,12.4427753 15.6331205,11.126513 13.6120656,10.4785171 L10.8326513,9.07699038 L10.3841197,9.97075733 Z"/>
<path d="M11.9769889,4.48241206 C11.9769889,2.54800219 10.807176,1.5 8.97698892,1.5 C7.12089292,1.5 5.97698892,2.53355002 5.97698892,4.48241206 C5.97698892,6.87094598 7.51565932,9.5 8.97698892,9.5 C10.4383185,9.5 11.9769889,6.87094598 11.9769889,4.48241206 Z M12.9769889,4.48241206 C12.9769889,7.3505461 11.1337512,10.5 8.97698892,10.5 C6.82022662,10.5 4.97698892,7.3505461 4.97698892,4.48241206 C4.97698892,1.9573661 6.58996061,0.5 8.97698892,0.5 C11.3364486,0.5 12.9769889,1.96971351 12.9769889,4.48241206 Z"/>
</g>
</svg>
</div>
I defined an svg icon like this
<svg style="display: none">
<symbol id="icon-check-mark-3" viewBox="0 0 200 200">
<title>check-mark-3</title>
<path fill="#fcc083" class="path1 fill-color2" d="M99.875 11.584c-48.968 0-88.666 39.697-88.666 88.666s39.698 88.666 88.666 88.666 88.666-39.698 88.666-88.666c0-48.969-39.698-88.666-88.666-88.666zM150.97 69.963l-48.493 67.173c-4.055 5.62-12.535 5.618-16.59 0l-25.396-35.181c-3.307-4.582-2.273-10.978 2.307-14.284 4.584-3.306 10.977-2.272 14.283 2.307l17.101 23.69 40.197-55.68c3.305-4.582 9.699-5.615 14.282-2.306 4.582 3.306 5.616 9.701 2.308 14.281z"></path>
</symbol>
</svg>
<p id="first">my first image
<use xlink:href="#icon-check-mark-3"></use>
</svg>
</p>
<p id="second">my second image
<use xlink:href="#icon-check-mark-3"></use>
</svg>
</p>
I need to color the #first icon in red.
I have spent nearly 2 hours to find the way to do this but I can't.
First, you are missing the <svg> opening tag in your paragraphs. Second, you need to remove the fill property on the symbol, then you will be able to specify the color of each svg with CSS like this :
#first svg {
fill: red;
}
#second svg {
fill: #fcc083;
}
<svg style="display: none">
<symbol id="icon-check-mark-3" viewBox="0 0 200 200">
<title>check-mark-3</title>
<path class="path1 fill-color2" d="M99.875 11.584c-48.968 0-88.666 39.697-88.666 88.666s39.698 88.666 88.666 88.666 88.666-39.698 88.666-88.666c0-48.969-39.698-88.666-88.666-88.666zM150.97 69.963l-48.493 67.173c-4.055 5.62-12.535 5.618-16.59 0l-25.396-35.181c-3.307-4.582-2.273-10.978 2.307-14.284 4.584-3.306 10.977-2.272 14.283 2.307l17.101 23.69 40.197-55.68c3.305-4.582 9.699-5.615 14.282-2.306 4.582 3.306 5.616 9.701 2.308 14.281z"></path>
</symbol>
</svg>
<p id="first">my first image
<svg>
<use xlink:href="#icon-check-mark-3"></use>
</svg>
</p>
<p id="second">my second image
<svg>
<use xlink:href="#icon-check-mark-3"></use>
</svg>
</p>
Use fill="currentColor" to set color to your svgs by color css attribute.
.red {
color: red;
}
.green {
color: green;
}
svg {
width: 12px;
height: 12px;
}
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="12" height="12" viewBox="0 0 12 12">
<path fill="currentColor" id="delete" d="M7.249,5.977 C7.249,5.977 11.863,10.606 11.863,10.606 C11.978,10.724 11.975,10.917 11.856,11.039 C11.856,11.039 11.036,11.877 11.036,11.877 C10.917,11.998 10.726,12.001 10.611,11.883 C10.611,11.883 5.992,7.248 5.992,7.248 C5.992,7.248 1.308,11.850 1.308,11.850 C1.194,11.966 1.005,11.963 0.887,11.843 C0.887,11.843 0.076,11.014 0.076,11.014 C-0.043,10.893 -0.046,10.701 0.069,10.584 C0.069,10.584 4.659,5.977 4.659,5.977 C4.659,5.977 0.069,1.368 0.069,1.368 C-0.046,1.251 -0.043,1.060 0.076,0.939 C0.076,0.939 0.887,0.110 0.887,0.110 C1.005,-0.011 1.194,-0.013 1.308,0.104 C1.308,0.104 5.992,4.704 5.992,4.704 C5.992,4.704 10.611,0.070 10.611,0.070 C10.726,-0.048 10.917,-0.045 11.036,0.076 C11.036,0.076 11.856,0.914 11.856,0.914 C11.975,1.035 11.978,1.230 11.863,1.347 C11.863,1.347 7.249,5.977 7.249,5.977 Z" />
</svg>
<p class="red">
<svg>
<use xlink:href="#delete"></use>
</svg>
red
</p>
<p class="green">
<svg>
<use xlink:href="#delete"></use>
</svg>
green
</p>