I'm trying to code a navigation using irregular (non-rectangle) buttons. The edges overlap each other on the Y axis so I'm not sure how to do this in HTML/CSS. I could use an imagemap but would rather not. Can someone please point me in the right direction? Thanks! (I included the image link here):
Sample Navigation Image
Here are some options:
Use a single image with an image map
Use overlaid divs that have CSS rotate transforms applied. Add click handlers to these divs.
Use SVG shapes and apply links to them. I've added an example.
Demonstration: http://jsfiddle.net/Phu5x/
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<a xlink:href="/svg/index.html">
<polygon points="15,10 95, 10 85, 30 5, 30"
style="fill: red; stroke: black;"/>
</a>
</svg>
If you want mouse over effects, try a single transparent PNG image with an image map. Put the event handlers on the <area> elements, if you need support for older IEs.
Related
I have a triangle shaped SVG file that I'm trying to make change colors when hovered over, as well as be a clickable link. When I hover over it, it does exactly that, however since it is not a rectangle, the empty space is also triggering the hover function, even though the svg is not being hovered over directly.
Is there a way to make the invisible space not trigger the hover?
Is that an SVG specific limitation?
And if this can be resolved, is it the same resolution if the image was a png and not an svg?
The <svg> will always take up a square space on the HTML page.
In this example the parent element of the <path> is an anchor element and the hover style is on the <path>.
path:hover {
fill: orange;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 5" width="200">
<a href="#">
<path fill="navy" d="M 3 0 L 0 5 L 6 5 Z"/>
</a>
</svg>
Css property clip-path is work fine but mask or -webkit-mask is not working properly in this example.
Please help me to solve this because my project is totally depended on masking image with svg file.
In clip-path, i can't resize image in responsive views so i have only one way to solve this problem.
So please check example code , may be i have made any mistake.
You need to reduce your SVG code and remove all the g element to keep only the path like this:
https://jsfiddle.net/hro4wbzf/
Then you use this inside the mask and you do the rotation with CSS if needed:
https://jsfiddle.net/7kyazn30/
Related: How to resize ClipPath area of SVG?
For a huge online svg, I recommend you use the tag ... , instead of passing it entirely in the url() property of your css as you did. The risk of error is greater. So here's what I suggest.
<mask id="maskMaskSource" class="MaskType" maskContentUnits="objectBoundingBox">
<svg> .... </svg>
</mask>
And in your css:
#maskMaskSource {
mask-image: url(#maskMaskSource);
}
.MaskType {
mask-type: alpha;
}
You can get a more detailed explanation here: https://lab.iamvdo.me/css-svg-masks/#testM7
I created a svg chart, I added a tooltip that shows the corresponding value when the mouse hovers.
The problem is, since the path is rendered after the bars are created, then the tooltip is show behind the path http://take.ms/lljq3. what I need is that the tooltip is always in front of everything.
I try to add z-index:-1; position: relative; to the path and z-index:999; position: fixed; to the text but is not working.
See the example here: https://jsfiddle.net/sgcw8btx/
When creating svg elements, following rule applys:
3.3 Rendering Order
Elements in an SVG document fragment have an implicit drawing order, with the first elements in the SVG document fragment getting "painted" first. Subsequent elements are painted on top of previously painted elements.
Isn't it possible to place the tooltip element before the bar / line?
Otherwise you could try using use?
<use xlink:href="#id" />
And you could try to embed the HTML directly:
<svg xmlns="http://www.w3.org/2000/svg">
<g transform="translate(20,30)">
<rect width="200" height="150"/>
<foreignObject width="200" height="150">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
Hello, <b>World</b>!
</div>
</body>
</foreignObject>
</g>
</svg>
I am fairly new to SVG but how can I display a SVG icon and change its color using inline CSS? For example, if I wanted to change the color of example.svg to #FFF000 how would I do that?
I tried searching online but I couldn't find anything.
collinksmith did answer your question but didn't explain that you cannot change the colour of a .svg file with CSS. You need to add the SVG inline then you can apply CSS to it.
You need to use the fill property of the svg's path. Assuming an svg html element, with a class set on the svg element itself:
.class-name path {
fill: red;
}
EDIT Here's an example: https://jsfiddle.net/4447zb7o/
EDIT 2 To set the css inline, change the style attribute of the path element inside the svg:
<svg class="my-svg" height="210" width="400">
<path style="fill: green" d="M150 0 L75 200 L225 200 Z" />
</svg>
I wonder if it's possible to apply svg filter to clipped html content. All demos I found have clipping and filtering separate.
Here's an example: http://jsfiddle.net/B7593/1/. I want the yellow circle to drop a shadow.
Tried adding filter=url('#dropshadow') / style='filter:url(#dropshadow)' to circle / clipPath / div elements, but none of these worked.
I don't think you can do it the way you're approaching it - even if you could make the shadow a part of the clip, you wouldn't see it when you applied the clip because none of the colour is retained, just the opacity of the pixels is used to determine what shows through. What will work (in Firefox at least), is to apply both the clip and the filter to content within the SVG like this:
<g filter="url(#dropshadow)">
<foreignObject width="300" height="300" clip-path="url(#c1)">
<body>
<div id="target"></div>
</body>
</foreignObject>
</g>
Here's a full example.