Related
I understand that I could simply swap one image for another on hover, or I could move the position of a sprite as a background, but is there any way I can change the fill of the svg on hover in some other way?
I originally thought the below would work but have discovered it does not work if the SVG is used as the src of an html image tag.
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="17px" viewBox="0 0 24 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
#Page-1:hover #Shape{
fill: #00A49E !important;
}
</style>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop" transform="translate(-454.000000, -1073.000000)" fill-rule="nonzero" fill="#9B9B9B">
<g id="email" transform="translate(454.000000, 1073.000000)">
<g id="Group">
<g id="Shape">
<path d="M22.2254762,0 C23.2055186,0 24,0.797143779 24,1.78716696 L24,15.212833 C24,16.1998581 23.2014771,17 22.2254762,17 L1.77452382,17 C0.794481378,17 0,16.2028562 0,15.212833 L0,1.78716696 C0,0.800141908 0.798522933,0 1.77452382,0 L22.2254762,0 Z M10.6054162,9.87197556 L2.12964982,3.11784921 C1.93425396,2.96214312 1.77777778,3.0378817 1.77777778,3.28512523 L1.77777778,14.7628523 C1.77777778,15.0060917 1.97746978,15.2105263 2.22380231,15.2105263 L21.7761977,15.2105263 C22.0198764,15.2105263 22.2222222,15.0100958 22.2222222,14.7628523 L22.2222222,3.28512523 C22.2222222,3.04188583 22.0646837,2.96298968 21.8703502,3.11784921 L13.3945838,9.87197556 C12.624058,10.4859884 11.3756236,10.4857346 10.6054162,9.87197556 Z M12.3507416,8.42142877 L20.3224534,2.06897091 C20.5152517,1.91533479 20.473415,1.78947368 20.2269738,1.78947368 L3.77302622,1.78947368 C3.52161302,1.78947368 3.48383733,1.91460885 3.67754658,2.06897091 L11.6492584,8.42142877 C11.8420567,8.57506489 12.1570324,8.57579083 12.3507416,8.42142877 Z"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
I'm trying to create an header using a svg to generate a curved shape, like so
I copied the SVG code generate from Sketch, deleted some extra tags and fixed the image path
<svg viewBox="0 0 1440 638" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<path d="M-4.54747351e-13,163 L1440,163 L1440,700.10075 C1259.32216,751.363088 1140.10686,781.914324 1082.35411,791.754457 C776.214966,843.915606 628.837414,646.620792 362.433874,644.205808 C184.831514,642.595818 64.0202229,656.876199 6.73310296e-11,687.046952 L-4.54747351e-13,163 Z" id="path-1"></path>
</defs>
<g id="Header-Copy" transform="translate(0, -163.000000)">
<mask id="mask" fill="white"><use xlink:href="#path-1"></use></mask>
<use id="Rectangle-Copy-2" fill="#0BE17D" transform="translate(720.000000, 481.765165) scale(-1, 1) translate(-720.000000, -481.765165) " xlink:href="#path-1"></use>
<image style="mix-blend-mode: darken;" mask="url(#mask)" x="0" y="0" width="1462.5" height="975" xlink:href="~assets/header_bg.jpg"></image>
</g>
</svg>
But I end up with this
How can I make this work?
Remove the transform attribute from element <use id="Rectangle-Copy-2">.
<svg viewBox="0 0 1440 638" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M-4.54747351e-13,163 L1440,163 L1440,700.10075 C1259.32216,751.363088 1140.10686,781.914324 1082.35411,791.754457 C776.214966,843.915606 628.837414,646.620792 362.433874,644.205808 C184.831514,642.595818 64.0202229,656.876199 6.73310296e-11,687.046952 L-4.54747351e-13,163 Z" id="path-1"></path>
</defs>
<g id="Header-Copy" transform="translate(0, -163.000000)">
<mask id="mask" fill="white"><use xlink:href="#path-1"></use></mask>
<use id="Rectangle-Copy-2" fill="#0BE17D" xlink:href="#path-1"></use>
<image style="mix-blend-mode: darken;" mask="url(#mask)" x="0" y="0" width="1462.5" height="975" xlink:href="~assets/header_bg.jpg"></image>
</g>
</svg>
According to example of this tutorials I want to mask my icon (black and white) instead of text in this tutorial. but right side of icon is still dark. how can I make left side of my icon black stroke and right side of icon goes white stroke?
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="41px" height="50px" viewbox="-3 -3 40 48">
<defs>
<mask id="myMask" maskUnits="userSpaceOnUse"
x="0" y="0" width="18" height="50">
<rect x="0" y="0" width="15" height="50" fill="white"/>
</mask>
<path id="fire-icon" d="m 25.55134,17.573125 c 0.647761,1.273107 1.136636,2.596633 1.344412,4.021007 0.21999,1.47479 0.13444,2.924371 -0.342217,4.348739 -0.427768,1.273111 -1.124413,2.382358 -2.004391,3.378155 -0.977758,1.096637 -2.114394,1.991591 -3.348802,2.773105 -0.183328,0.113445 -0.366658,0.226895 -0.57443,0.365546 1.429964,-3.214282 1.686623,-5.760501 0.366659,-8.924365 -0.904421,-2.155462 -2.395495,-3.743696 -3.519909,-4.4874 0,0 0.305545,3.655466 -2.248829,5.9874 0.391098,-1.184876 -0.672208,-2.31933 -0.672208,-2.31933 -0.31777,1.386549 -0.8922,1.651268 -1.662178,2.836135 -0.366658,0.567227 -0.708873,1.159666 -0.941085,1.802516 -0.342214,0.970596 -0.403325,1.953785 -0.207778,2.96219 0.134444,0.668067 0.342218,1.310925 0.63554,1.941174 0.02446,0.05042 0.04889,0.113449 0.08556,0.226893 C 12.156129,32.308418 11.899468,32.169763 11.655035,31.993294 10.921719,31.463881 10.163961,30.959677 9.467313,30.37985 8.5628918,29.623547 7.8173555,28.715982 7.3284794,27.619344 7.0351536,26.951277 6.8640469,26.245395 6.8151593,25.514301 c -0.097775,-1.65126 0.2933257,-3.201685 0.9899743,-4.676472 0.5010979,-1.071427 0.9777525,-2.142852 1.4544067,-3.226887 0.1344411,-0.31513 0.2199942,-0.66807 0.3055478,-1.008411 0.085554,-0.327726 0.1344412,-0.668063 0.1955503,-1.033609 0.9777516,0.46639 1.4544056,2.521009 0.9044216,3.857144 0.02444,0 0.03666,0 0.06111,0 0.232216,-0.302517 0.464431,-0.605039 0.696652,-0.907563 0.977751,-1.323526 1.869945,-2.684872 2.566595,-4.184872 0.623316,-1.34874 1.099973,-2.735295 1.185527,-4.247902 0.02445,-0.5294123 -0.02445,-1.0714263 -0.03667,-1.6008383 0.01223,0 0.02445,0 0.03667,0 0.65998,0.315125 1.307741,0.680673 1.882172,1.134457 1.014423,0.8193243 1.857728,1.7899163 2.566601,2.8991563 0.892198,1.411766 1.515512,2.936975 1.955505,4.550418 0.01223,0.06302 0.03667,0.126055 0.06111,0.214286 1.344407,-1.210083 0.513317,-4.172266 0.501096,-4.222688 -0.02445,-0.0252 2.261053,2.029411 3.409911,4.512605 z"
fill="none" stroke="#303233" stroke-width="1.3" />
</defs>
<!-- Draw black rectangle in the background -->
<rect x="18" y="0" width="15" height="50" fill="#000" />
<!-- Draw the text string twice. First, the white text without mask.
Second, the black text with the mask applied-->
<use xlink:href="#fire-icon" stroke="white"/>
<use xlink:href="#fire-icon" stroke="black" mask="url(#myMask)"/>
</svg>
There's no mask issue. The stroke on the path overrides the stroke on the use element, so in the question there are two grey (#303233) stroked paths. Removing the path stroke atribute allows the use to set one.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="41px" height="50px" viewbox="-3 -3 40 48">
<defs>
<mask id="myMask" maskUnits="userSpaceOnUse"
x="0" y="0" width="18" height="50">
<rect x="0" y="0" width="15" height="50" fill="white"/>
</mask>
<path id="fire-icon" d="m 25.55134,17.573125 c 0.647761,1.273107 1.136636,2.596633 1.344412,4.021007 0.21999,1.47479 0.13444,2.924371 -0.342217,4.348739 -0.427768,1.273111 -1.124413,2.382358 -2.004391,3.378155 -0.977758,1.096637 -2.114394,1.991591 -3.348802,2.773105 -0.183328,0.113445 -0.366658,0.226895 -0.57443,0.365546 1.429964,-3.214282 1.686623,-5.760501 0.366659,-8.924365 -0.904421,-2.155462 -2.395495,-3.743696 -3.519909,-4.4874 0,0 0.305545,3.655466 -2.248829,5.9874 0.391098,-1.184876 -0.672208,-2.31933 -0.672208,-2.31933 -0.31777,1.386549 -0.8922,1.651268 -1.662178,2.836135 -0.366658,0.567227 -0.708873,1.159666 -0.941085,1.802516 -0.342214,0.970596 -0.403325,1.953785 -0.207778,2.96219 0.134444,0.668067 0.342218,1.310925 0.63554,1.941174 0.02446,0.05042 0.04889,0.113449 0.08556,0.226893 C 12.156129,32.308418 11.899468,32.169763 11.655035,31.993294 10.921719,31.463881 10.163961,30.959677 9.467313,30.37985 8.5628918,29.623547 7.8173555,28.715982 7.3284794,27.619344 7.0351536,26.951277 6.8640469,26.245395 6.8151593,25.514301 c -0.097775,-1.65126 0.2933257,-3.201685 0.9899743,-4.676472 0.5010979,-1.071427 0.9777525,-2.142852 1.4544067,-3.226887 0.1344411,-0.31513 0.2199942,-0.66807 0.3055478,-1.008411 0.085554,-0.327726 0.1344412,-0.668063 0.1955503,-1.033609 0.9777516,0.46639 1.4544056,2.521009 0.9044216,3.857144 0.02444,0 0.03666,0 0.06111,0 0.232216,-0.302517 0.464431,-0.605039 0.696652,-0.907563 0.977751,-1.323526 1.869945,-2.684872 2.566595,-4.184872 0.623316,-1.34874 1.099973,-2.735295 1.185527,-4.247902 0.02445,-0.5294123 -0.02445,-1.0714263 -0.03667,-1.6008383 0.01223,0 0.02445,0 0.03667,0 0.65998,0.315125 1.307741,0.680673 1.882172,1.134457 1.014423,0.8193243 1.857728,1.7899163 2.566601,2.8991563 0.892198,1.411766 1.515512,2.936975 1.955505,4.550418 0.01223,0.06302 0.03667,0.126055 0.06111,0.214286 1.344407,-1.210083 0.513317,-4.172266 0.501096,-4.222688 -0.02445,-0.0252 2.261053,2.029411 3.409911,4.512605 z"
fill="none" stroke-width="1.3" />
</defs>
<!-- Draw black rectangle in the background -->
<rect x="18" y="0" width="15" height="50" fill="#000" />
<!-- Draw the text string twice. First, the white text without mask.
Second, the black text with the mask applied-->
<use xlink:href="#fire-icon" stroke="white"/>
<use xlink:href="#fire-icon" stroke="black" mask="url(#myMask)"/>
</svg>
I want to nest a set of svg pentagons inside each other, to get a result like this:
I can do this by manually setting the translate and scale values relative to the outer svg.
<svg class="defs-only"
xmlns="http://www.w3.org/2000/svg"
style="display: none;">
<symbol id="pentagon">
<polygon
points="
190.2113,0
0,138.1966
72.6542,361.8034
307.7684,361.8034
380.4226,138.1966
"/>
</symbol>
</svg>
<svg id="1" style="fill:#666" viewBox="0 0 380 362" width="380" height="362">
<use xlink:href="#pentagon"/>
<svg id="2" style="fill:#777" viewBox="0 0 380 362" width="380" height="362">
<use xlink:href="#pentagon" transform="translate(72.5 138) scale(0.618 0.618)"/>
<svg id="3" style="fill:#888" viewBox="0 0 380 362" width="380" height="362">
<use xlink:href="#pentagon" transform="translate(118 225) scale(0.381924 0.381924)"/>
</svg>
</svg>
</svg>
Is there a way that I can use the same translate and scale values in each nested layer, and have those values relative to the immediate parent? Will this mean using a percentage value for translate, and is this possible?
Heres a jsFiddle.
Context: eventually, I want the user to be able to drag the shapes around, with each moving the same way relative to its parent, in order to be able to create images like this:
source
EDIT: Here's the final version of the game.
Yes. Like so:
<svg class="defs-only"
xmlns="http://www.w3.org/2000/svg"
style="display: none;">
<symbol id="pentagon">
<polygon
points="
190.2113,0
0,138.1966
72.6542,361.8034
307.7684,361.8034
380.4226,138.1966
"/>
</symbol>
</svg>
<svg viewBox="0 0 380 362" width="380" height="362">
<g id="pent2and3">
<use xlink:href="#pentagon" style="fill:#777"/>
<use xlink:href="#pentagon" style="fill:#888" transform="translate(72.5 138) scale(0.618 0.618)"/>
</g>
<g id="pent1">
<use xlink:href="#pentagon" style="fill:#666"/>
<use xlink:href="#pent2and3" transform="translate(72.5 138) scale(0.618 0.618)"/>
</g>
</svg>
I am trying to create an SVG sprite.
I have set the SVG image to be 100px wide, 50px height, then offset the second by 50.
How can I set the size of the actual icon? Currently, the icon is huge and not 50px.
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100px"
height="50px">
<defs>
<g id="arrow">
<path d="M378.135,227.256L206.224,55.354c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.388-12.359,44.747,0
L445.258,204.89c6.177,6.18,9.262,14.271,9.262,22.366c0,8.098-3.091,16.195-9.262,22.372L250.971,443.91
c-12.359,12.365-32.394,12.365-44.747,0c-12.354-12.354-12.354-32.391,0-44.744L378.135,227.256z M9.265,399.166
c-12.354,12.354-12.354,32.391,0,44.744c12.354,12.365,32.382,12.365,44.748,0l194.287-194.281
c6.177-6.177,9.257-14.274,9.257-22.372c0-8.095-3.086-16.192-9.257-22.366L54.013,10.606c-12.365-12.359-32.394-12.359-44.748,0
c-12.354,12.354-12.354,32.388,0,44.748L181.18,227.256L9.265,399.166z"/>
</g>
</defs>
<use x="0" y="0" style="fill: #333" xlink:href="#arrow" />
<use x="50" y="0" style="fill: #999" xlink:href="#arrow" />
</svg>
This is what I see:
DO NOT USE TRANSFORM FOR SCALING
What you are missing is a defined viewBox.
If you do not define a viewBox the viewBox is the same size as the height and width that you defined.
So when you draw a path and some of its point are above 370 then they will be outside its container. Since your defined size is 100 width by 50 height. Any point with values higher then the size will not be drawn.
when you define a viewBox you can change the size without affecting what is drawn or not.
This is the article i allways use when i forget how to properly scale svgs: https://css-tricks.com/scale-svg/
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100px"
height="50px"
viewBox="0 0 500 500">
<defs>
<g id="arrow">
<path d="M378.135,227.256L206.224,55.354c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.388-12.359,44.747,0
L445.258,204.89c6.177,6.18,9.262,14.271,9.262,22.366c0,8.098-3.091,16.195-9.262,22.372L250.971,443.91
c-12.359,12.365-32.394,12.365-44.747,0c-12.354-12.354-12.354-32.391,0-44.744L378.135,227.256z M9.265,399.166
c-12.354,12.354-12.354,32.391,0,44.744c12.354,12.365,32.382,12.365,44.748,0l194.287-194.281
c6.177-6.177,9.257-14.274,9.257-22.372c0-8.095-3.086-16.192-9.257-22.366L54.013,10.606c-12.365-12.359-32.394-12.359-44.748,0
c-12.354,12.354-12.354,32.388,0,44.748L181.18,227.256L9.265,399.166z"/>
</g>
</defs>
<use x="0" y="0" style="fill: #333" xlink:href="#arrow" />
<use x="50" y="0" style="fill: #999" xlink:href="#arrow" />
</svg>
Like this? I just added transform="scale(0.1)" attribute to the g tag to make it 10x smaller
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100px"
height="50px">
<defs>
<g id="arrow" transform="scale(0.1)">
<path d="M378.135,227.256L206.224,55.354c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.388-12.359,44.747,0
L445.258,204.89c6.177,6.18,9.262,14.271,9.262,22.366c0,8.098-3.091,16.195-9.262,22.372L250.971,443.91
c-12.359,12.365-32.394,12.365-44.747,0c-12.354-12.354-12.354-32.391,0-44.744L378.135,227.256z M9.265,399.166
c-12.354,12.354-12.354,32.391,0,44.744c12.354,12.365,32.382,12.365,44.748,0l194.287-194.281
c6.177-6.177,9.257-14.274,9.257-22.372c0-8.095-3.086-16.192-9.257-22.366L54.013,10.606c-12.365-12.359-32.394-12.359-44.748,0
c-12.354,12.354-12.354,32.388,0,44.748L181.18,227.256L9.265,399.166z"/>
</g>
</defs>
<use x="0" y="0" style="fill: #333" xlink:href="#arrow" />
<use x="50" y="0" style="fill: #999" xlink:href="#arrow" />
</svg>