I'm making flat selector from floor view with image png with walls of floor and transparent background, i want to <image /> be over o my <a></a> so when i change color of polygons inside, walls will be black - not mix of black and ref and for example rgba(255,255,0.3) over black background fives rgb(139, 101, 101);
TLDR: How to make svg image to be above other elements?
<svg class="floor_svg" version="1.1" preserveAspectRatio="xMinYMin" viewBox="0 0 1080 800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image class="area__bck" stroke-width="0" xlink:href="<?=get_template_directory_uri()?>/hood/floor_template/b1-p1.png" preserveAspectRatio="xMinYMin" width="1080" height="800" y="0" x="0"></image>
<a xlink:href="#" data-floor_flat_nr="1">
<polygon points="388,84.5 388,64.3 253.2,64.3 253.2,84.5 88.3,84.5 88.3,393.1 516.8,393.1 516.8,84.5 "/>
<polygon class="terrace" points="57.8,10.3 71,10.3 235.3,10.3 235.3,67.8 71,67.8 71,164.7 51.1,164.7 51.1,311
13.1,311 13.1,164.7 13.1,162.7 13.1,10.3 "/>
</a>
<a xlink:href="#" data-floor_flat_nr="2">
<polygon points="456.8,773.8 219.9,773.8 219.7,615 147.8,615.5 147.8,404.3 517.5,404.3 517.5,479.2
456.8,478.9 "/>
<polygon class="logy" points="159,630.7 149.1,630.7 135.2,630.7 135.2,771.8 149.1,771.8 149.1,785.8 203.3,785.8
203.3,630.7 "/>
</a>
<a xlink:href="#" data-floor_flat_nr="3">
<polygon points="584.6,476 527.1,476.2 526.9,488.2 467.4,488.2 467.4,773.8 612.4,773.8 612.4,703.4
689.5,703.5 689.6,692.9 695.5,692.9 695.7,558 584.5,558 "/>
<rect x="618.5" y="703.5" class="logy" width="71.1" height="84.4"/>
</a>
</svg>
Paulie_D answer:
Put the image last? I think that's the stacking order!
yes it is
Related
I want to apply a single css rotation transformation to a set of elements in an SVG, such that each element is rotated independently, without having to calculate the centre of each element in the css. For example, I have an SVG that looks like the picture on the left, and want to apply css to achieve the effect on the right
I'm writing the svg myself, and am creating something like this
<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg">
<text transform="translate(50 100)" text-anchor="middle">Text 1</text>
<text transform="translate(100 100)" text-anchor="middle">Text 2</text>
</svg>
When I apply a css rotation, e.g. by inserting <style>text {transform: rotate(10deg)}</style>, it seems to overwrite the first transformation, and the rotated text is placed in the top left corner:
I can modify the svg to use `x="X" y="Y" instead of a transform attribute, but that results in the transformation being applied around a different centre instead:
<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg">
<style>text {transform: rotate(10deg)}</style>
<text x="50" y="100" text-anchor="middle">Text 1</text>
<text x="100" y="100" text-anchor="middle">Text 2</text>
</svg>
How can I structure the svg so that I can apply a rotation which works independently on each element without overwriting the initial transform?
This is a possible solution:
-The text has x="0" y="0" and is rotated with CSS.
-You put the text in the <defs>.
-You use the text and the <use> element has the x and y values you need.
text{transform:rotate(90deg)}
<svg baseProfile="full" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<text id="a" text-anchor="middle" >Text 1</text>
<text id="b" text-anchor="middle" >Text 2</text>
</defs>
<use xlink:href="#a" x="50" y="50" />
<use xlink:href="#b" x="100" y="50" />
</svg>
Yet another solution (inspired by the comment of Robert Longson) would wrapping the rotated text in a g element and translate the g
text{transform:rotate(90deg)}
<svg baseProfile="full" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(50,50)"><text text-anchor="middle" >Text 1</text></g>
<g transform="translate(100,50)"><text text-anchor="middle" >Text 2</text></g>
</svg>
I have an SVG that I am trying to use to clip a div, but the id I give to the <clipPath> tag does not work.
I have tried changing the ID, and have made sure that the SVG does indeed exist in the same file, and the ID is visible.
The svg is like so:
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 149.559">
<defs>
<clipPath id="clipper">
<g id="svgg" stroke="none" fill-rule="evenodd">
<path id="path0" d= .../>
<path id="path1" d= .../>
<path id="path2" d= .../>
<path id="path3" d= .../>
<path id="path4" d= .../>
</g>
</clipPath>
</defs>
</svg>
I added the <defs> and <clipPath> tag so I could use the svg I had as a clipping mask.
The html element being used is:
<div class="logo-bg" style="clipPath: url(#clipper)"></div>
the div does have a width and height.
Within developer tools, the css property of the div I am trying to clip with clip-path: url(#clip-id) shows "could not load the image". Ideally I would be able to clip the div with the SVG.
here's the code I am working with: https://jsfiddle.net/mzLtsqva/6/
I am new to working with SVGs and so would appreciate any help to solve this issue.
Inside the <clipPath> don't wrap the paths in a group element.
In the next example I'm using a clipping path that is not working: #no and one that is working: #yes. In the one that is not working I'm wrapping the elements inside in a <g> element.
svg{border:1px solid;}
<svg width="250" height="250" viewBox="0 0 250 250" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<rect id="rect" x ="0" y ="0" height ="150" width ="70" style ="stroke:#000;" transform="translate(90, 50)"/>
<clipPath id="no">
<g>
<use xlink:href="#rect" fill="none"></use>
<use xlink:href="#rect" fill="none" transform="rotate(60 125 125)"></use>
<use xlink:href="#rect" fill="none" transform="rotate(-60 125 125)"></use>
</g>
</clipPath>
</defs>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" height="250" width="250" x="-15" y ="50" clip-path="url(#no)"></image>
</svg>
<svg width="250" height="250" viewBox="0 0 250 250" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="yes">
<use xlink:href="#rect" fill="none"></use>
<use xlink:href="#rect" fill="none" transform="rotate(60 125 125)"></use>
<use xlink:href="#rect" fill="none" transform="rotate(-60 125 125)"></use>
</clipPath>
</defs>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" height="250" width="250" x="-15" y ="50" clip-path="url(#yes)"></image>
</svg>
I have created the below CSS Clip path with SVG. I would like to know that how to make it some unique shapes rather than the normal hexagonal mask? Also i would like to give border radius to the edges. Any help would be appreciated.
Thanks in Advance.
http://ktdev.khaleejtimes.ae/bg/bg-shapenw1.html
.svg_pan {
width: 90%;
height: 600px;
border-radius: 50px;
}
<svg class="svg-graphic svg_pan" width="180" height="200" viewBox="0 0 560 645" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
<g>
<clipPath id="hexagonal-mask">
<polygon points="130,0 0,160 0,485 270,645 560,485 460,160" />
</clipPath>
</g>
<a xlink:href="#">
<image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="al-seef.jpg" />
</a>
</svg>
You will need to calculate the d attribute for a path - your polygon with rounded corners. In this case I'm using quadratic Béziers for the rounded corners. I hope it helps.
.svg_pan {
border:1px solid;
}
<svg class="svg-graphic svg_pan" width="180" height="200" viewBox="0 0 560 645" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<clipPath id="hexagonal-mask-rounded">
<path d="M147.996,8.725 Q130,0 117.388,15.522L12.612,144.478 Q0,160 0.000,180.000L0.000,465.000 Q0,485 17.206,495.196L252.794,634.804 Q270,645 287.512,635.338L542.488,494.662 Q560,485 554.118,465.884L465.882,179.116 Q460,160 442.004,151.275Z" />
</clipPath>
</defs>
<a xlink:href="#">
<image clip-path="url(#hexagonal-mask-rounded)" height="650" width="650" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" />
</a>
</svg>
This is a tool you may use to calculate the d attribute for the path using the points attribute of the polygon: https://enxaneta.github.io/SVG_polygon_with_rounded_corners/
I have a SVG that is well presented in Firefox and Chrome, but in Edge the text doesn't center vertically.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<rect fill="#ff0000" x="0" y="0" width="64" height="64" rx="8" ry="8" />
<text font-size="32px" alignment-baseline="middle" dominant-baseline="center" fill="#fff" text-anchor="middle" lengthAdjust="spacingAndGlyphs" textLength="85%" x="32" y="32">
dev
</text>
</svg>
This is what it looks like when its well presented:
And this is how Edge is presenting it:
This is what you can do: You keep alignment-baseline="baseline". This works correctly on Edge. Then you offset the text on y with dy = font-size/4
Also I've removed lengthAdjust="spacingAndGlyphs" textLength="85%"from your code since this was offseting the text to the right in Edge.
svg{width:90vh;}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<rect fill="#ff0000" x="0" y="0" width="64" height="64" rx="8" ry="8" />
<text font-size="32px" dy="8" dominant-baseline="baseline" text-anchor="middle" fill="#fff" x="32" y="32">dev</text>
</svg>
For the most reliable cross-browser behaviour, you should consider not using the x-baseline attributes at all. Instead, position the text baseline exactly where you want it.
For example:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<rect fill="#ff0000" x="0" y="0" width="64" height="64" rx="8" ry="8" />
<text font-size="32px" fill="#fff" text-anchor="middle" lengthAdjust="spacingAndGlyphs" textLength="85%" x="32" y="39">
dev
</text>
</svg>
I have svg for social media icon and everytime I hover on it, it creates this blue underline and nothing seems to take it off. How can I remove it?
Here's how I include it.
<a class="footer-socialmedia-icons" style="padding-right:0.5rem;" target="_blank" href="https://www.facebook.com">
<img width="35px" height="35px" src="/files/IMG/facebook.svg" alt="facebook logo" class="">
</a>
EDIT:
here's the svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.1 (35376) - http://www.bohemiancoding.com/sketch -->
<title>facebook</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="facebook" fill="#DBC5DA">
<path d="M24.826,0 C11.137,0 0,11.137 0,24.826 C0,38.514 11.137,49.652 24.826,49.652 C38.514,49.652 49.652,38.514 49.652,24.826 C49.652,11.137 38.516,0 24.826,0 Z M31,25.7 L26.961,25.7 L26.961,40.096 L20.976,40.096 L20.976,25.7 L18.131,25.7 L18.131,20.612 L20.976,20.612 L20.976,17.321 C20.976,14.964 22.096,11.281 27.016,11.281 L31.451,11.298 L31.451,16.237 L28.232,16.237 C27.708,16.237 26.963,16.499 26.963,17.623 L26.963,20.613 L31.523,20.613 L31,25.7 Z" id="Shape"></path>
</g>
</g>
</svg>
EDIT
As it turns out, the blue line is underneath all tags. Tried text-decoration:none on but it doesn't do a thing.
Some browsers add a border to images in a elements to show them as clickable links.
If you don't want that, add
a img {border:none}
to your CSS.
This is not connected to SVG by the way; it happens on all images inside links.