I want to change stroke attribute color dynamically, I tried using binding like :stroke="CTAColor", but it didn't work.
Here's a simple SVG :
<svg class="swiper-arrow" viewBox="0 0 44 45" fill="none" xmlns="http://www.w3.org/2000/svg" v-if="language ==='en'" >
<rect x="-0.5" y="0.5" width="43" height="43" rx="21.5" transform="matrix(-1 0 0 1 42.999 0.250366)" stroke="#05AA9F"/>
<path d="M25.499 17.7504L29.999 22.2504M29.999 22.2504L25.499 26.7504M29.999 22.2504H13.999" stroke="#05AA9F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
I am trying to create tick Inside filled circle.
I did following but, doesn't looks perfect.
<svg height=10 viewBox="0 0 10 10" width=10>
<g fill="none" stroke="#22AE73" stroke-width="1"></g>
<circle cx=5 cy=5 fill='#29AB87' r=5 />
<polyline stroke="#ffffff" stroke-width="2" points="2.5,5.8 4.7,7.9 9.2,2.4 " />
</svg>
Any help would be greatly appreciated.
Your points are reaching the 10 10 part of your viewbox, hence it doesn't fit. You could change your points to lower values.
Alternatively, here's an svg that might work for you that is path based
<svg width="10px" height="10px" viewBox="0 0 10 10" >
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="tick">
<circle id="Oval" fill="#349006" cx="5" cy="5" r="5"></circle>
<path d="M7.26241838,2.25 L8.35843389,3.34601551 L3.9390165,7.76543289 L3.937,7.763 L3.93041937,7.77093389 L1.65,5.49051452 L2.74601551,4.39449901 L3.932,5.58 L7.26241838,2.25 Z" id="Combined-Shape" fill="#FFFFFF"></path>
</g>
</g>
</svg>
The background picture is not centering behind my SVG circle arc. You can see the image:
I want something like this:
obviously without the red cut part.
My HTML is as follows:
<svg width="200" height="200">
<defs>
<pattern id="image" x="0" y="0" width="1" height="1">
<image x="0%" y="0%" width="100%" height="100%" xlink:href="Assets/Images/RoundSlider.png"></image>
</pattern>
</defs>
<g transform="translate(100,100)" stroke="black" stroke-width="2">
<path d="M 0 0 -70 70 A 99 99 0 1 0 -70 -70 Z" fill="url(#image)" />
</g>
</svg>
This happens because your path's bounding box actually starts more on the right than if it were a full circle:
const bbox = document.querySelector('path').getBBox();
const rect = document.querySelector('rect');
rect.setAttribute('x', bbox.x);
rect.setAttribute('y', bbox.y);
rect.setAttribute('width', bbox.width);
rect.setAttribute('height', bbox.height);
<h3>The red rectangle represents your <path> BBox.</h3>
<svg width="200" height="200">
<g transform="translate(100,100)" stroke="black" stroke-width="2" fill="none">
<path d="M 0 0 -70 70 A 99 99 0 1 0 -70 -70 Z"/>
<rect stroke="red"/>
<circle stroke="green" r="100" cx="0" cy="0"/>
</g>
</svg>
So you can simply adjust your image's x attribute so it takes this offset into account (assuming you got a square image):
<svg width="200" height="200">
<defs>
<pattern id="image" width="1" height="1">
<!--
#mypath.getBBox().x = -70
Add 100 from translate(100, 100)
and we got our 30 units offset
-->
<image x="-30" y="0" width="200" height="200" xlink:href="https://upload.wikimedia.org/wikipedia/commons/9/95/Clock-green.png"/>
</pattern>
</defs>
<g transform="translate(100,100)" stroke="red" stroke-width="2">
<path id="mypath" d="M 0 0 -70 70 A 99 99 0 1 0 -70 -70 Z" fill="url(#image)"/>
</g>
</svg>
Or you could also just display this <image> and clip it (might be easier with more complex pathes):
<svg width="200" height="200">
<defs>
<clipPath id="myclip">
<use xlink:href="#mypath"/>
</clipPath>
</defs>
<image x="0" y="0" width="200" height="200" xlink:href="https://upload.wikimedia.org/wikipedia/commons/9/95/Clock-green.png" clip-path="url(#myclip)"/>
<path id="mypath" d="M 0 0 -70 70 A 99 99 0 1 0 -70 -70 Z" fill="transparent" transform="translate(100,100)" stroke="red" stroke-width="2"/>
</svg>
I am trying to create an SVG Button with a shape arrow, I am using path here my code, anyone suggest me to solve this problem
<svg height="100" width="300">
<path id="lineAB" d="M0 1 l 280 0 l50 50 l-50 50 l-280 0 z" stroke="gray" stroke-width="2" fill="red" />
</svg>
Here my screenshot:
I added a css border to your svg and it reveals the following:
<svg height="100" width="300" style="border: 1px solid black;">
<path id="lineAB" d="M0 1 l 280 0 l50 50 l-50 50 l-280 0 z" stroke="gray" stroke-width="2" fill="red" />
</svg>
The tip of your arrow gets cut of because the svg container is not big enough.
That's because 280 + 50 is 330 and you are limiting the size of the svg to 300.
The fix is either decreasing the button size to 300 or increasing the svg containers size:
smaller button:
<svg height="100" width="300" style="border: 1px solid black;">
<path id="lineAB" d="M0 1 l 250 0 l50 50 l-50 50 l-250 0 z" stroke="gray" stroke-width="2" fill="red" />
</svg>
bigger container:
<svg height="100" width="330" style="border: 1px solid black;">
<path id="lineAB" d="M0 1 l 280 0 l50 50 l-50 50 l-280 0 z" stroke="gray" stroke-width="2" fill="red" />
</svg>
Don't ask me what's going on with the IE. I guess it has different defaults for overflow, increases the element width along with the content or fits the svg to the container by decreasing its size.
Update:
I tested this with the IE. It looks like it is the overflow :).
Also the IE-test revealed a small failure when I decreased your button width: I forgot to decrease the length line back to the left (l-280 0). I updated the snippet.
Please try this SVG.
Hope this help.
<svg height="100" width="300">
<path id="lineAB" d='M0 1 l 250 0 l50 50 l-50 50 l-280 0 z' stroke="gray" stroke-width="2" fill="red" />
</svg>
I have noticed that some SVGs behave strangely when I try to include them with the <svg><use xlink:href="id-of-symbol" /></svg>. But if SVG is injected directly or referenced through <img> they look correctly.
I have created an example on CodePen: http://codepen.io/andeersg/full/qRWMQv/. In Chrome all three versions look the same, while in FireFox and IE11 the middle one is broken (the use version).
Have I done something wrong with SVG or is this a known bug?
mask, clipPath and filter elements (basically anything non-rendered that needs to be accessed by url() reference) don't work if they are within symbol elements in Firefox. This is a known bug.
There's an easy workaround though which is to move those elements outside the symbol element.
<svg width="0" height="0" style="position:absolute">
<mask id="ata" fill="#fff"><path d="M0 4.11c0 2.27 1.838 4.11 4.103 4.11a4.107 4.107 0 0 0 4.104-4.11C8.207 1.84 6.37 0 4.103 0A4.107 4.107 0 0 0 0 4.11z"></path></mask>
<mask id="atb" fill="#fff"><path d="M0 5.17c0 2.348 1.9 4.25 4.242 4.25a4.245 4.245 0 0 0 4.243-4.25c0-2.346-1.9-4.248-4.243-4.248A4.246 4.246 0 0 0 0 5.17z"></path></mask>
<symbol viewBox="0 0 65 72" id="helseogfamilie"><title>Page 1</title><g transform="translate(1)" fill="none" fill-rule="evenodd"><g transform="translate(1.06 4.242)" stroke="#4A5A28" stroke-width="3"><path d="M37.736.928V28.19c0 10.34-8.447 18.802-18.772 18.802S.19 38.531.19 28.19V.928"></path><path d="M55.824 26.98v19.743c0 10.34-8.447 18.801-18.772 18.801s-18.773-8.46-18.773-18.801"></path></g><g transform="translate(0 1.06)"><path fill="#4A5A28" mask="url(#ata)" d="M-5.303 13.523H13.51V-5.303H-5.303z"></path></g><g transform="translate(31.818)"><path fill="#4A5A28" mask="url(#atb)" d="M-5.303 14.722h19.09V-4.38h-19.09z"></path></g><path d="M62.465 25.635a5.584 5.584 0 0 1-5.579 5.588 5.584 5.584 0 0 1-5.58-5.588 5.584 5.584 0 0 1 5.58-5.589 5.584 5.584 0 0 1 5.579 5.589z" stroke="#4A5A28" stroke-width="2"></path></g></symbol>
</svg>
<svg width="65px" height="72px" viewBox="0 0 65 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40.2 (33826) - http://www.bohemiancoding.com/sketch -->
<title>Page 1</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M0,4.10984848 C0,6.37954545 1.8380303,8.21969697 4.10348485,8.21969697 C6.37,8.21969697 8.2069697,6.37954545 8.2069697,4.10984848 C8.2069697,1.84015152 6.37,0 4.10348485,0 C1.8380303,0 0,1.84015152 0,4.10984848 L0,4.10984848 Z" id="helseogfamilie-path-1"></path>
<path d="M0,5.17045455 C0,7.51757576 1.89954545,9.41924242 4.24242424,9.41924242 C6.58530303,9.41924242 8.48484848,7.51757576 8.48484848,5.17045455 C8.48484848,2.82439394 6.58530303,0.921666667 4.24242424,0.921666667 C1.89954545,0.921666667 0,2.82439394 0,5.17045455 L0,5.17045455 Z" id="helseogfamilie-path-3"></path>
</defs>
<g id="Forside" stroke="none" fill="none" fill-rule="evenodd">
<g transform="translate(-988.000000, -623.000000)" id="Page-1">
<g transform="translate(989.000000, 623.000000)">
<g id="Group-5" transform="translate(1.060606, 4.242424)" stroke="#4A5A28" stroke-width="3">
<path d="M37.7363636,0.928136364 L37.7363636,28.1899545 C37.7363636,38.5308636 29.2886364,46.9923788 18.9636364,46.9923788 C8.63863636,46.9923788 0.190909091,38.5308636 0.190909091,28.1899545 L0.190909091,0.928136364" id="helseogfamilie-Stroke-1"></path>
<path d="M55.8244697,26.9805455 L55.8244697,46.7226667 C55.8244697,57.0635758 47.3767424,65.5240303 37.0517424,65.5240303 C26.7267424,65.5240303 18.2790152,57.0635758 18.2790152,46.7226667" id="helseogfamilie-Stroke-3"></path>
</g>
<g id="Group-8" transform="translate(0.000000, 1.060606)">
<mask id="helseogfamilie-mask-2" fill="white">
<use xlink:href="#helseogfamilie-path-1"></use>
</mask>
<g id="Clip-7"></g>
<polygon id="Fill-6" fill="#4A5A28" mask="url(#helseogfamilie-mask-2)" points="-5.3030303 13.5227273 13.51 13.5227273 13.51 -5.3030303 -5.3030303 -5.3030303"></polygon>
</g>
<g id="Group-11" transform="translate(31.818182, 0.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#helseogfamilie-path-3"></use>
</mask>
<g id="Clip-10"></g>
<polygon id="Fill-9" fill="#4A5A28" mask="url(#mask-4)" points="-5.3030303 14.7222727 13.7878788 14.7222727 13.7878788 -4.38136364 -5.3030303 -4.38136364"></polygon>
</g>
<path d="M62.4649242,25.6347424 C62.4649242,28.7211061 59.967197,31.2230758 56.8861364,31.2230758 C53.8029545,31.2230758 51.3052273,28.7211061 51.3052273,25.6347424 C51.3052273,22.5483788 53.8029545,20.0464091 56.8861364,20.0464091 C59.967197,20.0464091 62.4649242,22.5483788 62.4649242,25.6347424 L62.4649242,25.6347424 Z" id="helseogfamilie-Stroke-12" stroke="#4A5A28" stroke-width="2"></path>
</g>
</g>
</g>
</svg>
<svg width="65" height="72"><use xlink:href="#helseogfamilie" /></svg>
<img src="https://beta.mgk.no/themes/custom/mgk/dev/svg/helseogfamilie.svg">