I'm trying to do something seemingly relatively simple, but after much googling and finicking , I can't seem to make it work.
I have an svg polygon that I'm using to clip an image into a triangle.
Currently it's inside a bootstrap column, (with an a tag in it) that links to an anchor point.
The issue with this, is that the div(square) all links to the anchor.
However, I have a bunch of these triangles adjoining, so I need the area that links to the anchor to be restricted to only what's inside the polygon clip path.
I have tried:
Moving the a tag inside the clippath tag
moving the a tag inside the polygon (as an href)
making the href in this format for svg xlink:href="#portfolioModal3"
I suspect it's some permutation of the third option that accomplishes my goal.
<div class="col-sm-4 portfolio-item dontwantpadding">
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class='tri-up'>
<svg width="100%" height="100%" viewBox="0 0 100 87">
<clipPath id="clipTriangleUp">
<polygon points="0 87,100 87,50 0"/>
</clipPath>
<image clip-path="url(#clipTriangleUp)" preserveAspectRatio="none" width="100%" height="100%" xlink:href="http://placehold.it/1749x1510"/>
</svg>
</div>
</a>
</div>
I plan on making the svg paths transition to circles from triangles, so something that will adapt to a circle svg path is ideal.
Any help is much appreciated!
SVGs can have <a> elements. Try putting your link inside your SVG.
<div class="col-sm-4 portfolio-item dontwantpadding">
<div class='tri-up'>
<svg width="100%" height="100%" viewBox="0 0 100 87">
<clipPath id="clipTriangleUp">
<polygon points="0 87,100 87,50 0"/>
</clipPath>
<a id="svgtriangle"
xlink:href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<image clip-path="url(#clipTriangleUp)" preserveAspectRatio="none"
width="100%" height="100%"
xlink:href="http://placehold.it/1749x1510"/>
</a>
</svg>
</div>
</div>
Hopefully you won't have any issue with Bootstrap finding the data-toggle.
Update
Okay, so it seems Bootstrap won't find your modal "open" link automatically, so you need to add a click handler to the triangle and open the modal yourself.
var triangle = document.getElementById("svgtriangle");
triangle.addEventListener('click', function(evt) {
$('#myModal').modal('show');
});
Demo fiddle here
Try moving the a tag inside and directly surrounding the image only.
<a><img src="foo" /></a>
Related
This question already has answers here:
SVG USE element and :hover style
(3 answers)
Closed 2 years ago.
It's strange that I couldn't find anyone else reporting this problem; that makes me think perhaps I am doing something wrong.
I have a <style> tag within an SVG that contains a :hover pseudo-class, it works properly when the SVG is directly embedded into the HTML, but when I put it within a symbol and reference it with a <use> tag, the styles inside the <style> tag are not applied.
SVG Directly-embedded:
<svg width="400" height="110">
<style>
#myRect:hover {
fill: red;
}
</style>
<rect id="myRect" width="300" height="100" />
</svg>
Defined in a symbol, and referenced via the <use> tag.
<svg style="display: none">
<symbol id="rectangle">
<style>
#myRect:hover {
fill: red;
}
</style>
<rect id="myRect" width="300" height="100" />
</symbol>
</svg>
<svg width="400" height="110">
<use href="#rectangle"></use>
</svg>
Why is this happening?! Seems like a weird behavior, am I missing something?!
UPDATE: As Temani Afif mentioned in the comments, this problem exists only in Chrome, Firefox seems to work as expected. (Haven't tested on any other browsers)
This is actually an interesting case, and while Temani Afif gave the right solution, I think it is worth a few more words in a separate answer.
First off, the question is not where the <style> tag sits. It could really be anywhere. The real question is raised by the :hover selector.
<svg style="display: none">
<symbol id="rectangle">
<style>
#myRect {
fill: blue;
}
#myRect:hover {
fill: red;
}
</style>
<rect id="myRect" width="300" height="100" />
</symbol>
</svg>
<svg width="400" height="110">
<use href="#rectangle"></use>
</svg>
The previous SVG 1.1 spec had a short paragraph that said "CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree", but the SVG 2 spec dropped that sentence.
It now has a lot to say about how style inheritance works for <use> elements. but all of it concerns the question: "If there are style rules for the corresponding element (the <symbol>), how are they applied to the shadow instance (what is inside the <use>)?"
But one question I really could find no answer to is: If a pseudo-class state applies to a shadow host, can the shadow instance elements also have that state? Or, to state it more clearly: If a pointer hovers over a <use> element, does it also hover over the elements inside the shadow tree?
There are no obvious answers in CSS Selectors or CSS Scoping, to name the other two relevant specs. And while Temani Afif alludes to the second one (and what was proposed when ::shadow was removed), this is not the same: nobody tries to select into the shadow tree, it is just that the rule selects a corresponding element.
That is where Firefox answers "yes" and Chrome answers "no". Which one is the bug? Interestingly, I could not find a bug report in either of the bug trackers.
An alternative using CSS variables that can cross the shadow with inheritance:
use[href*="rectangle"]:hover {
--f:red;
}
<svg style="display: none">
<symbol id="rectangle">
<rect style="fill:var(--f)" width="300" height="100" />
</symbol>
</svg>
<svg width="400" height="110">
<use href="#rectangle"></use>
</svg>
Works without inline style:
use[href*="rectangle"]:hover {
--f:red;
}
<svg style="display: none">
<symbol id="rectangle">
<style>
rect {
fill:var(--f);
}
</style>
<rect width="300" height="100" />
</symbol>
</svg>
<svg width="400" height="110">
<use href="#rectangle"></use>
</svg>
I would like to create an HTML element modeled on an SVG.
I tried the following options:
<object>: The tag is working but is causing problems in the animation of the svg. (You can not move the item without generating bugs)
<svg>: The tag does not allow me to add other elements inside, which is forced me to do.
background-image: url (path); does not allow modeling but just to put the image of the svg in the background. The model does not apply and leaves the user activated "onclick" when he clicks on non-drawn edges.
There would be something that could make a tag modeled on the SVG, so that the event "onclick" does not fire if we click on the "square" of the Div but on the round?
Here is a small diagram that summarizes the situation
Well in reality, as you will understand it is not a round model that I want to set up, it's a kind of tab menu, here is an overview:
I use JQUERYUI to handle tab moves, and the tag causes bugs that make it impossible to use.
An imaginary code that could fulfill this function I would like it to exist
<div model="https://example.com/model.svg">
<span>A untitled tab</span>
</div>
A link element in SVG document
If i understand you right you want a clickable svg tab?
.menu-link polygon {
fill: #222;
stroke: #66e;
}
.menu-link:hover polygon {
fill: #eee;
stroke: #88f;
}
.menu-link:hover text {
fill: #222;
}
<svg viewBox="0 0 100 50">
<a class="menu-link" href="#">
<polygon points=" 15,15 20,5 40,5 45,15 15,15"></polygon>
<text x="20" y="12" fill="white" font-size="0.35em">Text here</text>
</a>
<a class="menu-link" href="#">
<polygon fill="#222" stroke="pink" points=" 50,15 55,5 80,5 85,15 55,15"></polygon>
<text x="56" y="12" fill="white" font-size="0.35em">Other text</text>
</a>
</svg>
I have an SVG image map with various paths wrapped in anchors. These provide Bootstrap popover functionality. In Chrome, IE9 and other browsers, these links have appropriate sizes and are keyboard navigable. In IE10 and 11 they are tabbable, but no visual indication of tab position is presented since the paths and anchors have dimensions of 0.
How can I get them to have sizes in IE10+?
See a demo of the map here.
<figure class="svg-wrapper">
<svg class="img-responsive svg-content" id="map" version="1.1" viewBox="0 0 911 656" preserveAspectRatio="xMinYMin meet">
<image style="overflow:visible;" width="911" height="656" xlink:href="static/highed/HE-CampusMap-v5-text.png" />
<a class="pop-top" data-value="faculty" data-dept-name="Instructional Technology" href="#">
<path d="M505.5,96.2l-1,108l-43-0.4c0,0-19.5-32.3-66.5-31.2c-55.6,1.3-63,29.9-63,29.9l-45.5-0.4l1-108L505.5,96.2z" />
</a>
...
You can use border of your anchor/path for visual indication of focus. Add following to your CSS:
a:focus {
stroke-width:3;
stroke:rgb(0,0,0);
outline:none;
}
Demo: http://jsfiddle.net/Asg3c/4/
I am using SVGs, and for some reason, the height is set to 289 px by the user agent stylesheet.
I dont want to define the height, as I will be using many SVGs (like at least 256), and dont want to set different css rules manually for each of them by using !important.
So how do I adjust the user stylesheet (using Chrome) or reset the height field for SVGs!, so that it is not defined?
example SVG HTML: (SVG height is 25 px, yet the svg Bounding box renders to 289)
<div id="measure<%= measure.cid %>" class="measure">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="10" y="10" width="250" height="25" style="stroke:black; stroke-width:2; fill:lightgray;" />
<div id="<%= beatHolder %>">
</div>
</svg>
</div>
When trying Alex W's answer, I get this:
Can't you just add the rule to your stylesheet?
<style type="text/css">
...
svg { height: auto !important; }
</style>
You want to put that rule at the very bottom of the style tags to make sure it takes priority.
Also, in your code example it seems you are setting the rect to be 25 pixels, but not the actual <svg> element.
Okay so after playing with your example, I've come up with an answer for you. When using svg its computed style height is set from its parent element, so with that being said you would have to place your svg inside a div that has a width and height so I made a quick little example of how this would be used, so lets say we want to put a svg as a logo and then one for a banner or something we would accomplish this by doing your svg like this,
CSS
.logo {
width: 250px;
height: 27px;
}
.navigation {
width: 960px;
height: 54px;
}
HTML
<div class="logo">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="250" height="25" stroke="black" stroke-width="2" fill="lightgray" />
</svg>
</div>
<div class="navigation">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="960" height="50" stroke="black" stroke-width="2" fill="lightgray" />
</svg>
</div>
This is a part of my HTML I have embedded the SVG element.
<div>
<embed id="svgsource" type="image/svg+xml" src="/CXF/2012-01-27---11-35-47/6.svg">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="900px" height="751px" onload="init()" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>
</embed>
</div>
But when you go to this page, you notice a visible line on top of the SVG element, as if it has set a top border:
is there any way to get rid of that?
Why do you have an inline <svg> element inside the <embed>? Have you tried removing that part?
Maybe the svg you reference has a rectangle to serve as a border? In that case you'll need to change the "/CXF/2012-01-27---11-35-47/6.svg" file itself.