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>
Related
I am trying to use <use> tag to display an SVG. I am using Wordpress and have the file under the upload folder (as any other media). For some reason the <use> doesn't show, on the browser it show width and height as 0, even though I have inlined them in it.
My code:
<svg viewBox='0 0 153 91'>
<use href='https://example.com/wp-content/uploads/2021/04/arrow.svg' width='30' height='18'>
</svg>
In the Browser:
<svg viewBox="0 0 153 91">
<use href="https://example.com/wp-content/uploads/2021/04/arrow.svg" width="30" height="18">
</use>
</svg>
The svg file:
<svg fill="none" stroke="#fff" stroke-linecap="round" stroke-width="9.17" viewBox="0 0 153 91"><path d="m18.898 45.191h115.04"/><path d="m108.181 18.898 25.757 26.293-25.757 26.293"/></svg>
BONUS: Could the SVG be inlined somewhere in the <body> instead of the file uploaded?
This was missing on the SVG
xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"
Final SVG should be:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"
>
<symbol id="arrow" viewBox="0 0 153 91" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="9.17">
<path d="m18.898 45.191h115.04"/><path d="m108.181 18.898 25.757 26.293-25.757 26.293"/>
</symbol>
</svg>
src: SVG image tag not working
Cann't find the way to make it works:
I marked up pathes of SVG inside symbols with classnames
In outer CSS I made styling rules for those pathes
SVG inserted in HTML using mark up
On hover event I want to change styling of path with current classname
<style>
body>svg{display:none}
.st2,.st2_1{fill:#b0b2b4}
svg:hover .st2_1{fill:#f47456}
</style>
<a href="#">
<svg clacc="ico_vk">
<use xlink:href="#ico_vk" />
</svg>
</a>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="ico_vk" viewBox="0 0 24 24">
<path class="st2" d="M20.9 10.51c0 .31-.24.57-.55.57s-.55-.25-.55-.57c0-.31.24-.57.55-.57s.55.26.55.57zm0 0"/>
<path class="st2" d="M20.38 8.29c.25 0 .45-.21.45-.47V5.96c0-.79-.62-1.43-1.38-1.43H4.36c-.41 0-.78.19-1.05.51a.8.8 0 00-.13.13c-.15.24-.23.51-.23.8V18.4c0 .79.62 1.43 1.38 1.43h15.09c.76 0 1.38-.64 1.38-1.43v-5.28c0-.26-.2-.47-.45-.47a.46.46 0 00-.45.47v5.28c0 .28-.22.5-.48.5H4.33c-.27 0-.48-.23-.48-.5V5.88c0-.04.02-.08.04-.12.01-.01.02-.01.03-.02.12-.15.37-.27.55-.27h14.98c.27 0 .48.22.48.5v1.86c0 .25.2.46.45.46z"/>
<path class="st2_1" d="M9.47 14.43c-.24-.48-.48-1.04-.72-1.68s-.47-1.34-.69-2.1h1.09c.05.19.1.39.16.61s.13.44.19.66.13.44.2.65c.07.21.13.4.2.57.06-.17.13-.36.19-.57s.14-.43.2-.65.13-.44.19-.66c.06-.22.12-.42.16-.61h1.06c-.22.76-.45 1.46-.69 2.1-.24.64-.48 1.2-.72 1.68h-.82zM13.3 12.01c.1-.11.21-.23.31-.36.11-.12.21-.25.31-.37l.29-.35c.09-.11.17-.2.23-.29h1.22c-.24.29-.48.57-.71.83-.23.27-.49.54-.76.82.14.13.28.28.43.46s.29.37.43.56c.14.19.26.38.38.57.11.19.21.37.29.53h-1.18c-.07-.13-.16-.26-.25-.41-.09-.15-.19-.3-.3-.45-.11-.15-.22-.3-.33-.44s-.23-.26-.35-.35v1.66h-1.03v-5.4l1.03-.17v3.16z"/>
</symbol>
</svg>
Example here https://codepen.io/sPoul/pen/oNLPrMg
Is it passable to make it works with CSS only?
So I find the answer by myself
body>svg{display:none}
.st2{fill:#b0b2b4}
use{color:#b0b2b4}
a:hover use{color:#f47456}
.st2_1{fill:currentColor}
<a href="#">
<svg clacc="ico_vk">
<use xlink:href="#ico_vk" />
</svg>
</a>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="ico_vk" viewBox="0 0 24 24">
<path class="st2" d="M20.9 10.51c0 .31-.24.57-.55.57s-.55-.25-.55-.57c0-.31.24-.57.55-.57s.55.26.55.57zm0 0"/>
<path class="st2" d="M20.38 8.29c.25 0 .45-.21.45-.47V5.96c0-.79-.62-1.43-1.38-1.43H4.36c-.41 0-.78.19-1.05.51a.8.8 0 00-.13.13c-.15.24-.23.51-.23.8V18.4c0 .79.62 1.43 1.38 1.43h15.09c.76 0 1.38-.64 1.38-1.43v-5.28c0-.26-.2-.47-.45-.47a.46.46 0 00-.45.47v5.28c0 .28-.22.5-.48.5H4.33c-.27 0-.48-.23-.48-.5V5.88c0-.04.02-.08.04-.12.01-.01.02-.01.03-.02.12-.15.37-.27.55-.27h14.98c.27 0 .48.22.48.5v1.86c0 .25.2.46.45.46z"/>
<path class="st2_1" d="M9.47 14.43c-.24-.48-.48-1.04-.72-1.68s-.47-1.34-.69-2.1h1.09c.05.19.1.39.16.61s.13.44.19.66.13.44.2.65c.07.21.13.4.2.57.06-.17.13-.36.19-.57s.14-.43.2-.65.13-.44.19-.66c.06-.22.12-.42.16-.61h1.06c-.22.76-.45 1.46-.69 2.1-.24.64-.48 1.2-.72 1.68h-.82zM13.3 12.01c.1-.11.21-.23.31-.36.11-.12.21-.25.31-.37l.29-.35c.09-.11.17-.2.23-.29h1.22c-.24.29-.48.57-.71.83-.23.27-.49.54-.76.82.14.13.28.28.43.46s.29.37.43.56c.14.19.26.38.38.57.11.19.21.37.29.53h-1.18c-.07-.13-.16-.26-.25-.41-.09-.15-.19-.3-.3-.45-.11-.15-.22-.3-.33-.44s-.23-.26-.35-.35v1.66h-1.03v-5.4l1.03-.17v3.16z"/>
</symbol>
</svg>
The solution for me is to pass color information through the CurrentColor variable and use the color property of the USE tag.
I have an SVG used as a divider and I was wondering if on the curve of the svg, I can add a blue or black border that follows the path of the curve.
<svg width="100%" height="96px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
<path fill="#f4f6ff" d="M0,0 C40,33 66,52 75,52 C83,52 92,33 100,0 L100,100 L0,100 L0,0 Z"></path>
</svg>
Sure - just draw a path with a stroke on top of the shape.
<svg width="100%" height="96px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
<path fill="#f4f6ff" d="M0,0 C40,33 66,52 75,52 C83,52 92,33 100,0 L100,100 L0,100 L0,0 Z"></path>
<path fill="none" stroke="grey" stroke-width="1px" d="M0,0 C40,33 66,52 75,52 C83,52 92,33 100,0"></path>
</svg>
You can also stroke the original path and use a stroke-dasharray of the appropriate construction to make the dash cover just the top of the shape. Or you can use a svg filter to add a border to the top edge. Just drawing the border explicitly is the most straightforward.
You can use the CSS filter property if you can't directly edit the SVG to add the path (which might be a better way to go).
svg path {
filter: drop-shadow(0 -2px 0 blue);
}
<svg class="curve" width="100%" height="96px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
<path fill="#f4f6ff" d="M0,0 C40,33 66,52 75,52 C83,52 92,33 100,0 L100,100 L0,100 L0,0 Z"></path>
</svg>
I need multiple straight lines, and I have set the stroke-width to 4, but when I try to rotate them, the lines get thicker. Also when I try to set a negative value, for example <path d="M0 -10 20 0" stroke-width="4" stroke="red"></path> the line almost completely dissapears
<svg id="svg" width="100%" height="50">
<path d="M0 10 40 0" stroke-width="4" stroke="red"></path>
<path d="M40 0 80 0" stroke-width="4" stroke="blue"></path>
<path d="M80 0 120 0" stroke-width="4" stroke="green"></path>
</svg>
As said #Temani Afif half the width of the line goes beyond the border of the canvas of the SVG
Look please, I showed the borders of the canvas of the SVG with a gray line
<svg id="svg" width="100%" height="50" style="border:1px solid gray;">
<path d="M0 10 40 0" stroke-width="4" stroke="red"></path>
<path d="M40 0 80 0" stroke-width="4" stroke="blue"></path>
<path d="M80 0 120 0" stroke-width="4" stroke="green"></path>
</svg>
You can solve this problem by adding a viewBox and moving down the whole picture by adding the value -10 to the viewBox parameter
By setting the width and height of the SVG canvas as a percentage, you make your application responsive
<svg id="svg" width="100%" height="100%" viewBox="0 -10 150 50" style="border:1px solid gray;">
<path d="M0 10 40 0" stroke-width="4" stroke="red"></path>
<path d="M40 0 80 0" stroke-width="4" stroke="blue"></path>
<path d="M80 0 120 0" stroke-width="4" stroke="green"></path>
</svg>
You can also move the whole picture down 10 pixels with the command transform="translate(0 10)"
<svg id="svg" width="100%" height="100%" viewBox="0 0 150 50" style="border:1px solid gray;">
<g transform="translate(0 10)">
<path d="M0 10 40 0" stroke-width="4" stroke="red"></path>
<path d="M40 0 80 0" stroke-width="4" stroke="blue"></path>
<path d="M80 0 120 0" stroke-width="4" stroke="green"></path>
</g>
</svg>
If I will use more number of SVG Sprite icons in web application, it is very tough to use as below mentioned code for every icons. Is there any other easy ways to implement on web applications for more number of icons?
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16.3px"
height="26.9px" viewBox="0 0 16.3 26.9" enable-background="new 0 0 16.3 26.9" xml:space="preserve">
<g id="bg">
</g>
<g id="ui">
<g>
<polygon points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3 "/>
<polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="8.1,13 10.3,17.3 15.2,18 11.7,21.3 12.5,26 8.1,23.8
3.8,26 4.6,21.3 1.1,18 6,17.3 "/>
</g>
</g>
<g id="pop_ups">
</g>
</svg>
Is there any other different ways to use more number of icons on web applications?
One way of doing it is giving your star an id and reuse it with a use element. In fact the first SVG, the one where you keep your code may be hidden.
svg{border:1px solid;}
<svg width="16.3px" height="26.9px" viewBox="0 0 16.3 26.9">
<polygon id="star" points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3"/>
</svg>
<svg width="16.3px" height="26.9px" viewBox="0 0 16.3 26.9">
<use fill="none" stroke="#000000" xlink:href="#star" y="5"/>
</svg>
In this case you may give your <use> element an x and/or an y attribute. This is allowing you to move the star where ever you need it.
An other option id putting the code for your icons in a <symbol> and reuse it exactly like before with the bonus that a <symbol> can have a viewBox attribute and this is allowing you to have it in different sizes. For this you may give your <use> element an width and/or a height attribute.
svg{border:1px solid;}
<svg width="16.3px" height="26.9px" viewBox="0 0 16.3 26.9">
<symbol>
<polygon id="star" points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3" viewBox="0 0 16.3 26.9"/>
</symbol>
<use fill="none" stroke="#000000" xlink:href="#star"/>
</svg>
<svg width="40" height="40" viewBox="0 0 16.3 26.9">
<use fill="none" stroke="#000000" xlink:href="#star" width="30" y="5" />
</svg>
Please note that is better to leave the main path (#star in this case) without a fill and a stroke. This way you can give your <use> element a stroke and a fill so you can get differently filled or stroked stars
<svg width="16.3px" height="26.9px" viewBox="0 0 16.3 26.9">
<symbol>
<polygon id="star" points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3" viewBox="0 0 16.3 26.9"/>
</symbol>
<use fill="skyBlue" stroke="#000000" xlink:href="#star"/>
</svg>
<svg width="40" height="40" viewBox="0 0 16.3 26.9">
<use fill="gold" stroke="#000000" xlink:href="#star" width="30" y="5" />
</svg>
If you're not going to access the inner parts of your SVG with code (ie to change the color with a CSS class, or animate them with JavaScript), then you can just use an img tag and set the SVG as the source like you would with any normal image. You still get a lot of the benefits that SVGs offer like perfect scaling, etc. For example:
<img src="yourIcon.svg">
Should work. Good luck!