Sizing of svg element using elements with negative coordinates - svg

When I create an svg element that contains objects with negative coordinates as shown in this jfiddle: http://jsfiddle.net/QGq3H/1/
<div class="row">
<div class="col-sm-6">
<div style="display:inline-block; height:100px;"></div>
</div>
</div>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-10">
<svg class="svg-element" xmlns="http://www.w3.org/2000/svg" width="100" version="1.1" height="60">
<rect fill-opacity="0" style="fill-opacity: 0;" stroke="none" fill="#000000" ry="0" rx="0" r="0" height="60" width="100" y="0" x="0"></rect>
<circle cy="-50" cx="-50" style="" stroke="none" fill="#000000" r="10"></circle>
</svg>
</div>
</div>
In Chrome and IE the svg element has the same size as the visible part, in Firefox the svg is actually larger than the visible part. This is a problem when I want to get mouse coordinates relative to the svg element.
Which browser is correct? Is there a good workaround?

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!

Shadow Root? Calling out stroke color

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>

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>

Can't dynamically place text over the top of polygon

I want to put text on top of my polygons. unfortunately the text goes behind the shape is there anything similar to the css z index?
here is part of the svg in my html (its a lot of code because im drawing a map so here is only a little part of it.) Although below they all have the same coords, I did originally place them over the shape using the inspector in chrome, however the shapes remained above the text.
<svg width="400" height="800" viewBox="0 0 400 800" id="svg-doc">
<rect id="central-park" class="shape" x="154" y="370"width="53" height="127" />
<a xlink:href="/zipcodes/16">
<rect id="z10024" class="shape" x="68" y="415" width="85" height="40" />
<text x="0" y="15" fill="#5df8b8">10024</text>
</a>
<a xlink:href="/zipcodes/17">
<rect id="z10023" class="shape" x="68" y="457" width="85" height="40" />
<text x="0" y="15" fill="#5df8b8">10024</text>
</a>
<a xlink:href="/zipcodes/10">
<polygon id="z10034" class="shape" points="189,156 137,122 106,121 101,129 99,155 79,155 78,105 94,79 121,67 128,82 163,61 177,62 191,80" />
<text x="0" y="15" fill="#5df8b8">10024</text>
</a>
<a xlink:href="/zipcodes/28">
<polygon id="z10040" class="shape" points="188,167 186,155 137,122 108,122 102,126 100,153 77,156 77,166" />
<text x="0" y="15" fill="#5df8b8">10024</text>
</a>
<a xlink:href="/zipcodes/29">
<polygon id="z10033" class="shape" points="189,166 187,197 187,203 81,203 77,194 78,166" />
<text x="0" y="15" fill="#5df8b8">10024</text>
</a>

According to this site: http://alignedleft.com/tutorials/d3/an-svg-primer/
The order in which elements are coded determines their depth order.
In fact, the problem seems to be that all of your text is in the same place, at (0,15) - not underneath the polygons at all?
I edited the code from the question to move the text over the polygons, it is displayed correctly...
<svg width="400" height="800" viewBox="0 0 400 800" id="svg-doc">
<rect id="central-park" class="shape" x="154" y="370"width="53" height="127" />
<a xlink:href="/zipcodes/16">
<rect id="z10024" class="shape" x="68" y="415" width="85" height="40" />
<text x="70" y="450" fill="#5df8b8">10024</text>
</a>
<a xlink:href="/zipcodes/17">
<rect id="z10023" class="shape" x="68" y="457" width="85" height="40" />
<text x="70" y="480" fill="#5df8b8">10023</text>
</a>
<a xlink:href="/zipcodes/10">
<polygon id="z10034" class="shape" points="189,156 137,122 106,121 101,129 99,155 79,155 78,105 94,79 121,67 128,82 163,61 177,62 191,80" />
<text x="90" y="110" fill="#5df8b8">10034</text>
</a>
<a xlink:href="/zipcodes/28">
<polygon id="z10040" class="shape" points="188,167 186,155 137,122 108,122 102,126 100,153 77,156 77,166" />
<text x="120" y="160" fill="#5df8b8">10040</text>
</a>
<a xlink:href="/zipcodes/29">
<polygon id="z10033" class="shape" points="189,166 187,197 187,203 81,203 77,194 78,166" />
<text x="120" y="190" fill="#5df8b8">10033</text>
</a>
</svg>

Resources