Shadow Root? Calling out stroke color - svg
I am calling out a stroke in an SVG, it works if I don't put any class on the style. But I need to put it there because needed to be fixable for the end user to pick any color they want.
symbol#icon-arrow{
stroke: #ff6600;
} /*this is working*/
.icon-orange symbol#icon-arrow{
stroke: #99CA3D;
} /*this is not working, but this is what I need*/
<div id="icon-load" style="display:none;"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<symbol id="icon-arrow" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="square" stroke-linejoin="arcs" >
<path class="arrow" d="M12 19V6M5 12l7-7 7 7"/>
</symbol>
</svg>
<a href="#" class="icon">
<svg class="icon icon-orange"><use xlink:href="#icon-arrow"></use></svg>
</a>
As #enxaneta said, you have to style the <use> element, and let the colour percolate down to the symbol.
But you'll first need to remove the stroke attribute from the symbol. Otherwise that presentation attribute will override the colour you want it to inherit.
.icon-orange use {
stroke: #ff6600;
}
.icon-green use {
stroke: #99CA3D;
}
<div id="icon-load" style="display:none;"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<symbol id="icon-arrow" viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="square" stroke-linejoin="arcs" >
<path class="arrow" d="M12 19V6M5 12l7-7 7 7"/>
</symbol>
</svg>
<a href="#" class="icon">
<svg class="icon icon-orange"><use xlink:href="#icon-arrow"></use></svg>
</a>
<a href="#" class="icon">
<svg class="icon icon-green"><use xlink:href="#icon-arrow"></use></svg>
</a>
Inside the .icon-orange there is a <use> element. You have to style the use element. However if you need to refer the #icon-arrow here is how you can do it:
/*declare the namespace xlink*/
#namespace xlink "http://www.w3.org/1999/xlink";
/*style the use element inside the icon-orange whose's xlink:herf attribute is the icon arrow*/
.icon-orange use[xlink|href ="#icon-arrow" ]{
stroke: #99CA3D;
}
<div id="icon-load" style="display:none;"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<symbol id="icon-arrow" viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="square" stroke-linejoin="arcs" >
<path class="arrow" d="M12 19V6M5 12l7-7 7 7"/>
</symbol>
</svg>
<a href="#" class="icon">
<svg class="icon icon-orange"><use xlink:href="#icon-arrow" width="24" height="24"></use></svg>
</a>
Related
SVGs in menu getting cut off/cropped incorrectly
After spending hours looking into similar issues I still haven't found a solution that works. I have some SVGs that are rendering fine normally, but when they're placed in the <nav> parts are cut off. I have noticed that the issue seems to occur only when multiple SVG icons are used in the nav. So if, for example, I remove the first <li> item in its entirety the remaining SVGs seem to not have the problem of being cut off.
I've set up a codepen here with the same code below: https://codepen.io/lsg-alex/pen/oNgVLbq
<nav id="site-navigation" class="main-navigation">
<div class="menu-main-container">
<ul id="menu-main">
<li>
<a href="#"
><!--?xml version="1.0" encoding="UTF-8"?-->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 12.1 18.1"
width="12.1"
height="18.1"
>
<defs>
<style>
.cls-1,
.cls-4 {
fill: none;
}
.cls-2 {
clip-path: url(#clip-path);
}
.cls-3 {
fill: #58585b;
}
.cls-4 {
stroke: #58585b;
stroke-linecap: square;
stroke-linejoin: round;
stroke-width: 0.5px;
}
</style>
<clipPath id="clip-path">
<rect class="cls-1" width="12.1" height="18.1"></rect>
</clipPath>
</defs>
<title>icon-archive</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<g class="cls-2">
<path
class="cls-3"
d="M7.85,17.05H1.05v-14h10v10.8M9,1.15v1.1H4.24Zm.35-.9-8.71,2H.61a.42.42,0,0,0-.36.4v14.8a.41.41,0,0,0,.4.4H8.29a.31.31,0,0,0,.24-.12l3.25-3.25a.39.39,0,0,0,.07-.31V2.65a.41.41,0,0,0-.4-.4H9.83V.65A.43.43,0,0,0,9.38.25Z"
></path>
<path
class="cls-4"
d="M7.85,17.05H1.05v-14h10v10.8M9,1.15v1.1H4.24Zm.35-.9-8.71,2H.61a.42.42,0,0,0-.36.4v14.8a.41.41,0,0,0,.4.4H8.29a.31.31,0,0,0,.24-.12l3.25-3.25a.39.39,0,0,0,.07-.31V2.65a.41.41,0,0,0-.4-.4H9.83V.65A.43.43,0,0,0,9.38.25Z"
></path>
</g>
</g>
</g>
</svg>
<span class="menu-item__text">Archive</span></a
>
</li>
<li>
<a href="#"
><!--?xml version="1.0" encoding="UTF-8"?-->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 16.24 17.78"
width="16.24"
height="17.78"
>
<defs>
<style>
.cls-1 {
fill: none;
}
.cls-2 {
clip-path: url(#clip-path);
}
.cls-3 {
fill: #58585b;
}
</style>
<clipPath id="clip-path">
<rect class="cls-1" width="16.24" height="17.78"></rect>
</clipPath>
</defs>
<title>icon-topics</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<g class="cls-2">
<path
class="cls-3"
d="M5.24,10.35,6.23,8a.42.42,0,0,1,.39-.26h3.72a.44.44,0,0,1,.43.43.36.36,0,0,1-.06.2l-1,2.36a.42.42,0,0,1-.39.26H5.61a.44.44,0,0,1-.43-.43.36.36,0,0,1,.06-.2M8,.56,5.63,6.23a.43.43,0,0,1-.39.26H.61a.62.62,0,0,0,0,1.23H4.36a.43.43,0,0,1,.42.43.35.35,0,0,1,0,.2l-1,2.36a.42.42,0,0,1-.4.26H.61a.62.62,0,0,0,0,1.23H2.46a.43.43,0,0,1,.43.43.46.46,0,0,1-.05.2L1.11,16.93a.62.62,0,0,0,1.14.48l2.09-4.94a.42.42,0,0,1,.39-.26H8.44a.43.43,0,0,1,.43.43.46.46,0,0,1,0,.2L7.16,16.77a.62.62,0,0,0,1.15.46l2-4.76a.42.42,0,0,1,.39-.26h4.92a.6.6,0,0,0,.43-.18.61.61,0,0,0-.43-1h-4a.43.43,0,0,1-.42-.43.35.35,0,0,1,.05-.2l1-2.36a.42.42,0,0,1,.4-.26h3a.62.62,0,0,0,0-1.23H13.49a.43.43,0,0,1-.43-.43.46.46,0,0,1,0-.2l2.11-5A.62.62,0,0,0,14.08.38L11.61,6.23a.42.42,0,0,1-.39.26H7.51a.43.43,0,0,1-.43-.43.46.46,0,0,1,0-.2L9.18,1A.62.62,0,0,0,8,.56"
></path>
</g>
</g>
</g>
</svg>
<span class="menu-item__text">Topics</span></a
>
</li>
<li>
<a href="#"
><!--?xml version="1.0" encoding="UTF-8"?-->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 16.72 16.14"
width="16.72"
height="16.14"
>
<defs>
<style>
.cls-1 {
fill: none;
}
.cls-2 {
clip-path: url(#clip-path);
}
.cls-3 {
fill: #58585b;
}
</style>
<clipPath id="clip-path" transform="translate(0 0)">
<rect class="cls-1" width="16.72" height="16.14"></rect>
</clipPath>
</defs>
<title>icon-search</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<g class="cls-2">
<path
class="cls-3"
d="M9.84,11c-2.75-.13-4.75-2.1-4.65-4.57A4.6,4.6,0,0,1,10,2.06a4.58,4.58,0,0,1,4.52,4.63A4.57,4.57,0,0,1,9.84,11m-5.55-.57c-.86.81-3,3-3.86,3.81a1,1,0,0,0-.15,1.5,1.07,1.07,0,0,0,1.6,0c.87-.82,3.05-3.08,3.89-3.89,4.1,2.38,7.81,1,9.71-1.56a6.37,6.37,0,0,0-.8-8.44,7,7,0,0,0-9.06-.47,6.43,6.43,0,0,0-1.33,9"
transform="translate(0 0)"
></path>
</g>
</g>
</g>
</svg>
<span class="menu-item__text">Search</span></a
>
</li>
</ul>
</div>
</nav>
I tried adjusting the viewBox settings, height/width on the SVGs themselves as well as through CSS, setting overflow to visible, using a .svg inside an tag, etc. but none of these seem to have any impact. When I pull one of the SVGs that's cut off outside of the nav and paste the code above it, for example, it renders properly.
I can't help but feel like there's something obvious here I'm overlooking, and any help would be really appreciated.
This line is your culprit, remove them (or at least this first one since it's the one effecting the ones below it) and voila; <clipPath id="clip-path"> <rect class="cls-1" width="12.1" height="18.1"></rect> </clipPath> Then to keep it clean, remove the references to it in the CSS such as; clip-path: url(#clip-path); I'm going to assume these were generated with something and you didn't intend on needing a specified clip-path anyway. Cheers!
SVG + Handlebars - Rotating a graphic and adjusting proportions
I'm trying to rotate a graphic within a svg but i'm having the hardest time.
Below image is what I'm trying to achieve, a rotated version by switching the original width with the height but keeping all original proportions
I've tried rotating the individual object and rotating the full on but nothing comes even remotely close to the end result. the screenshot below comes from my front end webpage, the backend unfortunately needs an svg to print labels in the correct location.
let me know if anything else is needed to be able to troubleshoot this
Screenshot of how it would look coming out of your printer:
Desired End Result (badges to wear on your person):
Handlebars template:
<svg id="svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="{{paper.width}}{{paper.unit}}" height="{{paper.height}}{{paper.unit}}" viewBox="0 0 {{paper.width}} {{paper.height}}">
{{#each papers}}
<g transform="translate({{leftOffset}}, {{topOffset}})">
{{#each badges}}
<!--Badge {{#index}}-->
<g transform="translate({{leftOffset}}, {{topOffset}})">
<svg width="{{width}}" height="{{height}}" viewBox="0 0 {{width}} {{height}}">
{{#each objects}}
{{#if placeholder}}
<!--Text: {{placeholder}}-->
<svg x="{{x}}" y="{{y}}" width="{{width}}" height="{{height}}">
<text x="{{leftOffset}}" y="{{topOffset}}" text-anchor="{{alignment}}" font-size="{{fontSize}}" font-family="{{fontName}}" font-weight="{{fontWeight}}" font-style="{{fontStyle}}" fill="{{fontColor}}" transform="rotate({{rotation}} {{rotationX}} {{rotationY}})">
{{value}}
</text>
</svg>
{{else}}
{{#if background}}
<!--Background: {{name}}-->
{{else}}
{{#if isDropdown}}
<!--Image: {{value}}-->
{{else}}
{{#if file}}
<!--Image: Uploaded - {{cid}}-->
{{else}}
<!--Image: {{name}}-->
{{/if}}
{{/if}}
{{/if}}
<svg preserveAspectRatio="{{aspectRatio}}" x="{{leftOffset}}" y="{{topOffset}}" width="{{width}}" height="{{height}}" viewBox="0 0 {{backWidth}} {{backHeight}}">
<image xlink:href="{{href}}" x="0" y="0" width="100%" height="100%" transform="rotate({{rotation}} {{rotationX}} {{rotationY}})"/>
</svg>
{{/if}}
{{/each}}
</svg>
</g>
{{/each}}
</g>
{{/each}}
<defs>
<style type="text/css">
{{#each googleFonts}}
<link xmlns="http://www.w3.org/1999/xhtml" href="{{url}}" rel="stylesheet" type="text/css" />
{{/each}}
{{#each fonts}}
{{fontFace}}
{{/each}}
</style>
</defs>
</svg>
Completed example:
<svg id="svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="8.267in" height="11.692in" viewBox="0 0 8.267 11.692">
<g transform="translate(0.27906, 1.62367)">
<!--Badge 0-->
<g transform="translate(0, 0)">
<svg width="3.8548" height="2.1114" viewBox="0 0 3.8548 2.1114">
<!--Image: belgian-flag(2).jpg-->
<svg preserveAspectRatio="none" x="1.2888000000000002" y="0.172" width="0.4915" height="0.4988" viewBox="0 0 226 400">
<image xlink:href="https://i.imgur.com/QLTDr7J.jpg;" x="0" y="0" width="100%" height="100%" transform="rotate(90 200 113)"/>
</svg>
<!--Image: Albania.png-->
<svg preserveAspectRatio="xMidYMid meet" x="2.3009999999999997" y="0.2335" width="0.5038" height="0.5036" viewBox="0 0 48 48">
<image xlink:href="https://i.imgur.com/gFbTCmq.png;" x="0" y="0" width="100%" height="100%" transform="rotate(90 24 24)"/>
</svg>
<!--Text: Name-->
<svg x="1.5157" y="0.2712" width="2.0202" height="0.48227999999999993">
<text x="2.1817" y="0.3122" text-anchor="end" font-size="0.2225" font-family="Arial" font-weight="400" font-style="normal" fill="#000000" transform="rotate(90 1.0101 0.24113999999999997)">
DFGHDFGH
</text>
</svg>
<!--Text: Title-->
<svg x="1.5526" y="1.2349" width="2.0202" height="0.47652">
<text x="1.2227999999999999" y="0.2818833333333333" text-anchor="end" font-size="0.16666666666666666" font-family="Arial" font-weight="400" font-style="italic" fill="#000000" transform="rotate(90 1.0101 0.23826)">
dfghdgh
</text>
</svg>
</svg>
</g>
<!--Badge 1-->
<g transform="translate(3.8548, 0)">
<svg width="3.8548" height="2.1114" viewBox="0 0 3.8548 2.1114">
<!--Image: belgian-flag(2).jpg-->
<svg preserveAspectRatio="none" x="0.4193" y="1.3148" width="0.4924" height="0.5027" viewBox="0 0 400 226">
<image xlink:href="https://i.imgur.com/QLTDr7J.jpg;" x="0" y="0" width="100%" height="100%" transform="rotate(0 113 200)"/>
</svg>
<!--Image: Albania.png-->
<svg preserveAspectRatio="xMidYMid meet" x="0.4808" y="0.3016" width="0.5078" height="0.5027" viewBox="0 0 48 48">
<image xlink:href="https://i.imgur.com/gFbTCmq.png;" x="0" y="0" width="100%" height="100%" transform="rotate(0 24 24)"/>
</svg>
<!--Text: Name-->
<svg x="1.5119" y="0.2707" width="2.02212" height="0.48263999999999996">
<text x="1.6851" y="0.3261" text-anchor="end" font-size="0.25" font-family="Arial" font-weight="400" font-style="normal" fill="#000000" transform="rotate(0 1.01106 0.24131999999999998)">
DFGHDF
</text>
</svg>
<!--Text: Title-->
<svg x="1.5504" y="1.2375" width="2.02212" height="0.4732799999999999">
<text x="1.6851" y="0.2805333333333333" text-anchor="end" font-size="0.16666666666666666" font-family="Arial" font-weight="400" font-style="italic" fill="#000000" transform="rotate(0 1.01106 0.23663999999999996)">
ghdfghdfgh
</text>
</svg>
</svg>
</g>
</g>
<defs>
<style type="text/css">
#font-face {
font-family: '
Arial'
;
src: url('file:///G:/Work/NPGC/assets/fonts/Arial.ttf') format('
truetype'
);
}
</style>
</defs>
</svg>
I am not the least sure I have understood what you mean when you say "keeping all original proportions". My interpretation is that you refer to percentages of the badge width/height. The best way to write this is to rotate not the individual components, but the badge as a whole: Define one badge in landscape proportions, and the other in portrait proportions. Set respective width, height and viewBox for both. The content elements get identical attributes for both variants: x and y for all of them, and width and height for the images all get percentage values. The portrait badge is then rotated and translated so that it sits below the landscape badge. <svg xmlns="http://www.w3.org/2000/svg" width="8.267in" height="11.692in" viewBox="0 0 8.267 11.692"> <!-- landscape mode --> <svg width="3.8548" height="2.1114" viewBox="0 0 3.8548 2.1114"> <image xlink:href="https://i.imgur.com/gFbTCmq.png;" x="8%" y="25%" width="15%" height="15%" preserveAspectRatio="xMidYMid meet"/> <image xlink:href="https://i.imgur.com/QLTDr7J.jpg;" x="8%" y="63%" width="15%" height="12%" preserveAspectRatio="none"/> <text x="88%" y="30%" text-anchor="end" font-size="0.25" font-family="Arial" font-weight="400" font-style="normal" fill="#000000">My Name</text> <text x="88%" y="70%" text-anchor="end" font-size="0.25" font-family="Arial" font-weight="400" font-style="normal" fill="#000000">My Title</text> </svg> <!-- portrait mode --> <svg height="3.8548" width="2.1114" viewBox="0 0 2.1114 3.8548" transform="translate(0 4.2228) rotate(-90)"> <image xlink:href="https://i.imgur.com/gFbTCmq.png;" x="8%" y="25%" width="15%" height="15%" preserveAspectRatio="xMidYMid meet"/> <image xlink:href="https://i.imgur.com/QLTDr7J.jpg;" x="8%" y="63%" width="15%" height="12%" preserveAspectRatio="none"/> <text x="88%" y="30%" text-anchor="end" font-size="0.25" font-family="Arial" font-weight="400" font-style="normal" fill="#000000">My Name</text> <text x="88%" y="70%" text-anchor="end" font-size="0.25" font-family="Arial" font-weight="400" font-style="normal" fill="#000000">My Title</text> </svg> </svg> I've rotated the portrait variant counter-clockwise. If that is a problem, the clockwise transform would read transform="translate(3.8548 2.1114) rotate(90)" For the template part, you only need to differentiate between the badge dimensions. All internal dimensions stay the same for both badges.
SVG 100vh height, with auto/responsive width?
Is there a simple way to have an SVG inside a div respond to the parent container's height and adjust the width accordingly? <div class="wrapper"> <div class="svg-wrap"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192.75 512"> <title>SVG FULL HEIGHT</title> <g id="Layer_2" data-name="Layer 2"> <g id="export"> <path class="cls-1" d="M41.71,256c0-110.21,61-206.16,151-256H0V512H192.75C102.7,462.16,41.71,366.21,41.71,256Z" /> </g> </g> </svg> </div> </div> FIDDLE
Set the SVG to 100vh.
body {
margin: 0;
padding: 0;
}
.svg-wrap svg {
height: 100vh;
}
.wrapper {
background: #CCC;
}
.cls-1 {
fill: #ffcc00;
}
<div class="wrapper">
<div class="svg-wrap">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192.75 512">
<title>SVG FULL HEIGHT</title>
<g id="Layer_2" data-name="Layer 2">
<g id="export">
<path class="cls-1" d="M41.71,256c0-110.21,61-206.16,151-256H0V512H192.75C102.7,462.16,41.71,366.21,41.71,256Z" />
</g>
</g>
</svg>
</div>
</div>
why text-outline not work in my svg?
whenever i use text-outline or stroke in style. it's not work. how i can give text-outline to my text(SVG TEXT) in text tag. <div class="slides2"> <img class="" src="//cdn.shopify.com/s/files/1/0797/1743/products/HK-CK_28785899-10b3-4f49-88be-975a69089e52_1024x1024.JPG?v=1464803870"> <div class="custom"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="410" height="70" viewBox="0 0 2326 460"> <defs> <clipPath id="my-path"> <text id="texty" style="font-weight:bold;text-outline: 2px 2px #ff0000;" x="60" y="300" font-size="350">SVG TEXT</text> </clipPath> </defs> <image xlink:href="Mother of Pearl.JPG" clip-path="url(#my-path)" width="100%" height="100%" id="filler" preserveAspectRatio="none"></image> </svg> </div> </div>
Anything you include in a <clipPath> is used only to form the clipping path. It is never rendered. If you want it to also be rendered, then you will need to include it again as a separate object. <div class="slides2"> <img class="" src="//cdn.shopify.com/s/files/1/0797/1743/products/HK-CK_28785899-10b3-4f49-88be-975a69089e52_1024x1024.JPG?v=1464803870"> <div class="custom"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="410" height="70" viewBox="0 0 2326 460"> <defs> <clipPath id="my-path"> <text id="texty" style="font-weight:bold;" x="60" y="300" font-size="350">SVG TEXT</text> </clipPath> </defs> <image xlink:href="Mother of Pearl.JPG" clip-path="url(#my-path)" width="100%" height="100%" id="filler" preserveAspectRatio="none"></image> <text id="texty" style="font-weight:bold; stroke: #f00; stroke-width: 2;" x="60" y="300" font-size="350">SVG TEXT</text> </svg> </div> </div>
Consistently change background colour upon hovering over an SVG link
I decided to play around re-making a nav menu in SVG. It looks quite a bit like this site's nav actually, so nothing much to imagine. I'm drawing boxes with SVG and then placing text over them, enclosing them both in a link. By attaching a css class to the box, I can set a :hover attritbute, so I can change the background colour when the user hovers over it. The problem is, when the user hovers over the text the color change is reversed, even though the link still works. How can I make the box change colour as well? The code looks like this: <svg width="640px" height="40px" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <g transform="translate(60 20) "> <a xlink:href="http://www.apple.com"> <rect width="100" height="40" x="-50" y="-20" rx="5" class="svg_nav" /> <text class= "nav_text" text-anchor="middle" dominant-baseline="mathematical">Home</text> </a> </g> </svg>
What do your style rules look like?
Something like the following should work fine:
<svg width="640px" height="40px"
xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(60 20) ">
<a xlink:href="http://www.apple.com">
<rect width="100" height="40" x="-50" y="-20" rx="5" class="svg_nav" />
<text class= "nav_text" text-anchor="middle" dominant-baseline="mathematical">Home</text>
</a>
</g>
<g transform="translate(166 20) ">
<a xlink:href="http://www.apple.com">
<rect width="100" height="40" x="-50" y="-20" rx="5" class="svg_nav" />
<text class= "nav_text" text-anchor="middle" dominant-baseline="mathematical">Home</text>
</a>
</g>
<style>
g:hover .svg_nav { fill: blue }
g:hover .nav_text { fill: red }
.svg_nav { fill: yellow }
.nav_text { fill: black }
</style>
</svg>