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>
Related
Is it possible to vertically center align all the rects inside a tag without having to adjust the y attributes on <rect>? (see snippet for example)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" preserveAspectRatio="none" width="100%" height="100%">
<g fill="black">
<rect x="10" y="1" width="6" height="5" />
<rect x="20" y="1" width="6" height="10" />
<rect x="30" y="1" width="6" height="20" />
<rect x="40" y="1" width="6" height="5" />
<rect x="50" y="1" width="6" height="15" />
</g>
</svg>
<h3>desired result</h3>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" preserveAspectRatio="none" width="100%" height="100%">
<g fill="black">
<rect x="10" y="8" width="6" height="5" />
<rect x="20" y="6" width="6" height="10" />
<rect x="30" y="1" width="6" height="20" />
<rect x="40" y="8" width="6" height="5" />
<rect x="50" y="4" width="6" height="15" />
</g>
</svg>
No, it's not possible to center align <rect> elements.
But it is possible to center-align <line> elements and give them a stroke-width (note the viewBox is vertically centered around 0):
<svg viewBox="0 -19 225 38" width="100%" height="100%">
<g stroke="black">
<line x1="10" x2="16" stroke-width="5" />
<line x1="20" x2="26" stroke-width="10" />
<line x1="30" x2="36" stroke-width="20" />
<line x1="40" x2="46" stroke-width="5" />
<line x1="50" x2="56" stroke-width="15" />
</g>
</svg>
You could also achieve vertically centered <rect> elements by setting a transform: translate(0, -50%) css rule.
This approach also requires a transform-box: fill-box; (or content-box) property.
All <rect>elements get a y="50%" attribute to start at the vertical center of the svg viewBox.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" width="100%" height="100%" style="border:1px solid #ccc">
<style>
rect {
transform: translate(0, -50%);
transform-origin: center;
transform-box: fill-box;
}
</style>
<g fill="black" >
<rect x="10" y="50%" width="6" height="5" />
<rect x="20" y="50%" width="6" height="10" />
<rect x="30" y="50%" width="6" height="20" />
<rect x="40" y="50%" width="6" height="5" />
<rect x="50" y="50%" width="6" height="15" />
</g>
</svg>
Browser support for transform-box is decent. (See caniuse).
However, if you need legacy browser (e.g. ie11) support, #ccprog's answer is a more robust solution.
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>
I am trying to put the word "fox" inside this blue rectangle, but it just doesn't happen. What am I doing wrong here?
<html>
<body>
<svg width="400" height="200">
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:0;fill-opacity:0.7;stroke-opacity:0.1">
<text fill="#44ffff" font-size="45" font-family="Verdana" x="150" y="96">fox</text>
</svg>
</body>
</html>
As pointed out in my comment, your XML is invalid. The well-formed XML
<svg width="400" height="200">
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:0;fill-opacity:0.7;stroke-opacity:0.1" />
<text fill="#44ffff" font-size="45" font-family="Verdana" x="150" y="96">fox</text>
</svg>
works for me.
I want to embed an image with rounded corners inside a svg-file. how can i aproach this? I googled about that problem, but couldnt find anything useful...
I'm grateful for any help or hints.
<!DOCTYPE html>
<html>
<body>
<svg width="640" height="800">
<rect x="280" y="0" ry="10" width="80" height="100"
style="fill:limegreen; stroke:black;" />
<rect x="260" y="90" ry="15" width="120" height="30"
style="fill:mintcream; stroke:black;" />
<rect x="200" y="150" ry="10" width="80" height="100"
style="fill:limegreen; stroke:black;" />
<rect x="180" y="240" ry="15" width="120" height="30"
style="fill:mintcream; stroke:black;" />
<rect x="360" y="150" ry="10" width="80" height="100"
style="fill:limegreen; stroke:black;" />
<rect x="340" y="240" ry="15" width="120" height="30"
style="fill:mintcream; stroke:black;" />
<rect x="120" y="300" ry="10" width="80" height="100"
style="fill:limegreen; stroke:black;" />
<rect x="100" y="390" ry="15" width="120" height="30"
style="fill:mintcream; stroke:black;" />
<rect x="280" y="300" ry="10" width="80" height="100"
style="fill:limegreen; stroke:black;" />
<rect x="260" y="390" ry="15" width="120" height="30"
style="fill:mintcream; stroke:black;" />
<rect x="440" y="300" ry="10" width="80" height="100"
style="fill:limegreen; stroke:black;" />
<rect x="420" y="390" ry="15" width="120" height="30"
style="fill:mintcream; stroke:black;" />
</svg>
</body>
</html>
the greens are supposed to be different images. so how do i get the images to have rounded corners?
You can apply the same clipPath to multiple elements like this...
<!DOCTYPE html>
<html>
<body>
<svg width="640" height="800">
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<rect ry="0.1" width="1" height="1" fill="black" />
</clipPath>
<rect x="280" y="0" width="80" height="100"
style="fill:limegreen;" clip-path="url(#clip)" />
<rect x="260" y="90" ry="15" width="120" height="30"
style="fill:mintcream; stroke:black;" />
<rect x="200" y="150" width="80" height="100"
style="fill:limegreen;" clip-path="url(#clip)" />
<rect x="180" y="240" ry="15" width="120" height="30"
style="fill:mintcream; stroke:black;" />
</svg>
</body>
</html>
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>