I want to move a svg element outside of it's container but is hiding. I enabled overflow: visible still can't figured out the problem.
I created the svg with figma. Clip content is disabled
Here you have the code & a photo to better see the problem.
This SVG code might be helpful... Open this Snippet in full view..
/** Animation Boxes (Moving on cursor move) **/
.showcase-animation-container {
position: absolute;
right: 350px;
width: 500px;
height: 500px;
svg {
position: absolute;
top: 0;
left: 0;
overflow: visible !important;
width: 100%;
height: 100%;
}
}
.left-triangle { transform-origin: center center }
.left-triangle {
transform: translate(-180px, -70px) rotate(-50deg);
fill: red;
}
<div class="showcase-animation-container">
<svg width="736" height="589" viewBox="-80 0 556 589" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_f)" style="
/* margin-left: 180px; */
">
<path class="left-triangle" d="M12.6269 323.5L130 82.9806L247.373 323.5H12.6269Z" stroke="black" stroke-width="7"></path>
<path d="M389.373 265.5L272 506.019L154.627 265.5H389.373Z" stroke="black" stroke-width="7"></path>
<path d="M308.627 323.5L426 82.9806L543.373 323.5H308.627Z" stroke="black" stroke-width="7"></path>
</g>
<defs>
<filter id="filter0_f" x="-180" y="-7" width="736" height="589" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
<feGaussianBlur stdDeviation="3.5" result="effect1_foregroundBlur"></feGaussianBlur>
</filter>
</defs>
</svg>
</div>
I updated the svg element, you can check it in the gist, i just increased the frame size in figma.
I am trying to have an SVG fit the browser window in an electron window. I have set the width and height of the window to 600 and 840, respectively.
Right now, unless I double click the grey bar at the top of the window to full-size it, there is a white bar that exists at the bottom of the screen. The peculiar part about this problem is that the white bar kind of skips when it appears, as I decrease the dimensions of the window.
I've set the aspect ratio and initial browser size with electron, evidenced by the relevant part of my main.js code.
function createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 600,
height: 840
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
mainWindow.setAspectRatio(1.37)
On the HTML Side, I just have a div, and an SMG.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="X/Electron/smoothiebro1/scripts.js" type="text/JavaScript" /></script>
</head>
<body>
<div id="container" class="svg-container">
<img src="X/Electron/smoothiebro1/img/Rectangle 2.svg" id="blenderOutline">
</div>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</body>
</html>
Here is the CSS for my container DIV:
html, body { margin:0; padding:0; overflow:hidden; height: 100%;}
svg { position:fixed; top:0; bottom:0; left:0; right:0; border: none; padding: 0; display: block;margin: 0 auto;max-height: 100%; max-width: 100%;}
div{
border: none;
padding: 0px;
margin: 0px;
}
And lastly, here is my "Rectangle" SVG code:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560.362 769.971" preserveAspectRatio="xMidYMid meet" >
<defs>
<style>
.cls-1 {
fill: #fff;
stroke: #777;
stroke-linejoin: round;
stroke-width: 10px;
}
.cls-2 {
stroke: none;
}
.cls-3 {
fill: none;
}
</style>
</defs>
<g id="Rectangle_2" data-name="Rectangle 2" class="cls-1" transform="translate(10 10)">
<rect class="cls-2" width="540.362" height="749.971" rx="18"/>
<rect class="cls-3" x="-5" y="-5" width="550.362" height="759.971" rx="23"/>
</g>
</svg>
Got it to work! Perhaps somebody can explain why, but when I made the aspect ratio the reciprocal of 1.37, then it worked.
I got that number from dividing the viewbox height and width by each other.
I'm trying to trigger my svg animation when I hover over <span>.
I had to use <span> over my object tag to enable my <a> to work but then I was not able to activate my :hover for my svg.
I've tried all ways to use JavaScript to trigger but am still unable to do it.
Any idea if it is possible or not?
HTML:
<div class="links">
<a href="http://www.facebook.com" title="facebook" class="facebook">
<span id="fbI"><object class="icon" id="faceb" type="image/svg+xml" data="images/fb.svg">
<img src="images/fb.svg" alt="ssRight"/>
</object></span>
</a>
</div>
CSS:
.links a
{
position: relative;
z-index: 1;
}
.links a span
{
display: block;
border-bottom: 3px solid white;
}
.links a object
{
display: inline;
position: relative;
z-index: -1;
}
JavaScript:
$('span#fbI').hover(function(e) {
$('#faceb').trigger('mouseover');
})
OBJECT TAG SVG CODES:
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79.45 79.45">
<defs>
<style>
.cls-1 {
fill: #878484;
}
.cls-2 {
fill: #fff;
}
svg:hover #bg
{
fill: #205599;
}
</style>
</defs>
<title>fb</title>
<g>
<circle id="bg" class="cls-1" cx="39.73" cy="39.73" r="39.73"/>
<path id="fb" class="cls-2" d="M-897.51- 494c0,3.22,0,6.43,0,9.65a1,1,0,0,1- 1.2,1.19c-2.27-.05-4.54,0- 6.81,0a0.89,0.89,0,0,1-1.09-1.09c0-6.43,0-12.86,0-19.3,0-1.17,0-1.16-1.16-1.1- 0.85,0-1.7,0-2.55,0a0.58,0.58,0,0,1-.67-0.69c0-2,0-4,0-6.05a0.64,0.64,0,0,1,.8-0.75c0.88,0,1.77,0,2.65,0a0.76,0.76,0,0,0,1-.94,39.91,39.91,0,0,1,.11-5.85,7.72,7.72,0,0,1,7.65-7.07c2.3-.06,4.6-0.07,6.9-0.14a0.79,0.79,0,0,1,1,1c0,1.86,0,3.72,0,5.58a0.66,0.66,0,0,1-.81.81c-1,0-2.08,0-3.12,0-1.83,0-2.54.72-2.76,2.52-0.13,1.07,0,2.14-.08,3.21a0.66,0.66,0,0,0,.82.82c1.64,0,3.28,0,4.92,0,0.7,0,1,.18.87,0.92-0.23,2-.41,3.95-0.57,5.92a0.7,0.7,0,0,1-.83.76c-1.39,0-2.78,0-4.16,0-0.67,0-.94.11-0.91,0.86,0.06,1.64,0,3.28,0,4.92s0,3.22,0,4.82h0Z" transform="translate(940.65 544.4)"/>
</g>
</svg>
[the highlighted box is the span box, as u can see in my codes, once i display:block; it would cover over my object tag and thus being unable to trigger my hover over for it.][1]
Hi there your desired hover function can be achieved by the following.
$( "span#fbI" ).hover(function() {
$('#fbI').css('background','purple')
});
Here is the jsfiddle for that. I dont know what effect u want so i just turned it purple.
https://jsfiddle.net/qansvs0n/4/
I am trying to crop background image with custom form.. but I have stacked with that.
The goal is to crop image like this:
Think of every step like it is different html pages (page-1.html, page-2.html, page-3.html).
In the page-1.html background is pretty simple. The important think to admit - this pictures have to be responsive.
page-1.html
background-image: url(image-1.jpg) no-repeat 50% 0;
background-size: cover;
The second example can be done by using <svg> elements.
page-2.html
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="200" viewBox="0 0 100 102" preserveAspectRatio="none" class="triangle-svg">
<path d="M0 100 L50 0 L100 100 Z"></path>
</svg>
<style>
.triangle-svg {
position: absolute;
left: 0;
right: 0;
top: auto;
bottom: 0;
z-index: 999;
fill: #fff;
}
</style>
But what about third example? I don't know how to deal with it.
In 3 example we see something like:
<div class='top-layout'></div>
<div class='bottom-layout'></div>
The .top-layout image should be croped. The <svg> decision is bad because we should able to put second image uderneeth the first.
.top-layout {
height: 500px;
}
.bottom-layout {
height: 500px;
position: relative;
top: -150px;
}
And all this stuff should be responsive with background-size: conver effect.
#phrogz deserve all the credits since he answered first.
Demo of clip-path, mask and gradient. For your solution, replace the contents of group <g clip-path="url(#clip-bottom)" > ... </g> with your own <image .... clip-path="url(#clip-bottom)" />. Usually I'd create a group with clip-path to keep the image tag cleaner, but that's my own preference.
I have a series of svg rectangles (using D3.js) and I want to display a message on mouseover, the message should be surrounded by a box that acts as background. They should both be perfectly aligned to each other and to the rectangle (on top and centered). What is the best way to do this?
I tried adding an svg text using the "x", "y", "width" and "height" attributes, and then prepending an svg rect. The problem is that the reference point for the text is in the middle (since I want it centered aligned I used text-anchor: middle), but for the rectangle it's the top left coordinate, plus I wanted a bit of margin around the text which makes it kind of a pain.
The other option was using an html div, which would be nice, because I can add the text and padding directly but I don't know how to get the absolute coordinates for each rectangle. Is there a way to do this?
Can you use simply the SVG <title> element and the default browser rendering it conveys? (Note: this is not the same as the title attribute you can use on div/img/spans in html, it needs to be a child element named title)
rect {
width: 100%;
height: 100%;
fill: #69c;
stroke: #069;
stroke-width: 5px;
opacity: 0.5
}
<p>Mouseover the rect to see the tooltip on supporting browsers.</p>
<svg xmlns="http://www.w3.org/2000/svg">
<rect>
<title>Hello, World!</title>
</rect>
</svg>
Alternatively, if you really want to show HTML in your SVG, you can embed HTML directly:
rect {
width: 100%;
height: 100%;
fill: #69c;
stroke: #069;
stroke-width: 5px;
opacity: 0.5
}
foreignObject {
width: 100%;
}
svg div {
text-align: center;
line-height: 150px;
}
<svg xmlns="http://www.w3.org/2000/svg">
<rect/>
<foreignObject>
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
Hello, <b>World</b>!
</div>
</body>
</foreignObject>
</svg>
…but then you'd need JS to turn the display on and off. As shown above, one way to make the label appear at the right spot is to wrap the rect and HTML in the same <g> that positions them both together.
To use JS to find where an SVG element is on screen, you can use getBoundingClientRect(), e.g. http://phrogz.net/svg/html_location_in_svg_in_html.xhtml
The only good way I found was to use Javascript to move a tooltip <div> around. Obviously this only works if you have SVG inside an HTML document - not standalone. And it requires Javascript.
function showTooltip(evt, text) {
let tooltip = document.getElementById("tooltip");
tooltip.innerHTML = text;
tooltip.style.display = "block";
tooltip.style.left = evt.pageX + 10 + 'px';
tooltip.style.top = evt.pageY + 10 + 'px';
}
function hideTooltip() {
var tooltip = document.getElementById("tooltip");
tooltip.style.display = "none";
}
#tooltip {
background: cornsilk;
border: 1px solid black;
border-radius: 5px;
padding: 5px;
}
<div id="tooltip" display="none" style="position: absolute; display: none;"></div>
<svg>
<rect width="100" height="50" style="fill: blue;" onmousemove="showTooltip(evt, 'This is blue');" onmouseout="hideTooltip();" >
</rect>
</svg>
You can use the title element as Phrogz indicated. There are also some good tooltips like jQuery's Tipsy http://onehackoranother.com/projects/jquery/tipsy/ (which can be used to replace all title elements), Bob Monteverde's nvd3 or even the Twitter's tooltip from their Bootstrap http://twitter.github.com/bootstrap/
On svg, the right way to write the title
<svg>
<title id="unique-id">Checkout</title>
</svg>
check here for more details https://css-tricks.com/svg-title-vs-html-title-attribute/
I came up with something using HTML + CSS only. Hope it works for you
.mzhrttltp {
position: relative;
display: inline-block;
}
.mzhrttltp .hrttltptxt {
visibility: hidden;
width: 120px;
background-color: #040505;
font-size:13px;color:#fff;font-family:IranYekanWeb;
text-align: center;
border-radius: 3px;
padding: 4px 0;
position: absolute;
z-index: 1;
top: 105%;
left: 50%;
margin-left: -60px;
}
.mzhrttltp .hrttltptxt::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #040505 transparent;
}
.mzhrttltp:hover .hrttltptxt {
visibility: visible;
}
<div class="mzhrttltp"><svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#e2062c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><div class="hrttltptxt">علاقهمندیها</div></div>
I always go with the generic css title with my setup. I'm just building analytics for my blog admin page. I don't need anything fancy. Here's some code...
let comps = g.selectAll('.myClass')
.data(data)
.enter()
.append('rect')
...styling...
...transitions...
...whatever...
g.selectAll('.myClass')
.append('svg:title')
.text((d, i) => d.name + '-' + i);
And a screenshot of chrome...
I use heroicons for the project I am working on. (This is JSX format) I will handle the tooltip issue with this code.
<svg className="h-6 w-6">
<title>{reasons.join(" ")}</title>
<QuestionMarkCircleIcon className={style} />
</svg>