Am hardly finding right words to describe the challenge i have in hand. I have set of nodes arranged in Organizational Chart way. I want to know if there is a way to connect those nodes through lines and these lines should be dynamic - may be drawing them using CSS would be right way.
Things look similar to what's been shown in pic.
Along with way to draw lines that connects nodes i would be happy to know if there is a more efficient way to generate those nodes dynamically like <ul> and <li> structure.
Following is the code snippet i have used to generate above image (which has very minimal usage of Bootstrap):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<title>Oval</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
body{
padding-top: 20px;
}
.oval {
width: 400px;
height: 160px;
background: #5fa2dd;
border-radius: 50%;
text-align: center;
}
.circle {
width: 190px;
height: 190px;
background: #9cc96b;
border-radius: 50%;
}
.emptyrow{
margin : 50px 0;
}
.med-circle{
width: 150px;
height: 150px;
background: #9cc96b;
border-radius: 50%;
}
</style>
</head>
<body class="container">
<div class="row">
<div class="col-lg-4 col-lg-offset-4 oval"><p>key1 : value1</p><p>key2 : value2</p><p>key3 : value3</p></div>
</div>
<div class="row emptyrow">
</div>
<div class="row">
<div class="col-lg-2 col-lg-offset-2 circle"></div>
<div class="col-lg-2 col-lg-offset-2 circle"></div>
<div class="col-lg-2 col-lg-offset-2 circle"></div>
</div>
</body>
</html>
Question in nutshell :
Better way to generate nodes dynamically
How to draw lines to connect those nodes ?
I would go with SVG.
With that you can do pretty much anything you want, lines included, which CSS will have much more difficulties to handle
Fiddle demo
Stack snippet
svg {
display: block;
margin: auto;
width: 100vmin;
}
.shadow {
-webkit-filter: drop-shadow( 2px 2px 2px rgba(0,0,0,0.5) );
filter: drop-shadow( 2px 2px 2px rgba(0,0,0,0.5) );
}
.line {
stroke: gray;
}
.ellipse {
fill: lightblue;
}
.circle {
fill: lightgreen;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="395" height="305" viewBox="0 0 395 305" class="shadow">
<line x1="195" y1="70" x2="50" y2="200" stroke-width="1" class="line"/>
<line x1="195" y1="70" x2="195" y2="200" stroke-width="1" class="line"/>
<line x1="195" y1="70" x2="340" y2="200" stroke-width="1" class="line"/>
<ellipse cx="195" cy="70" rx="120" ry="70" class="ellipse"/>
<text x="50%" y="70" text-anchor="middle" dy=".3em">Some text...</text>
<circle cx="50" cy="250" r="50" class="circle"/>
<text x="50" y="250" text-anchor="middle" dy=".3em">Some text...</text>
<circle cx="195" cy="250" r="50" class="circle"/>
<text x="195" y="250" text-anchor="middle" dy=".3em">Some text...</text>
<circle cx="340" cy="250" r="50" class="circle"/>
<text x="340" y="250" text-anchor="middle" dy=".3em">Some text...</text>
</svg>
Related
The "logo" appearing as a yellow SVG circle below can be scaled by adjusting the height ratio (line indicated by <==== (1) in the code), enabling tuning without modifying the SVG itself.
But even though .left_center_myicon is mostly duplicated in .right_center_myicon, the same tuning in <==== (2) does not affect the radio button icons.
How can I center scaled radio button icons in their DIV? I'm using here inline SVGs as even changing them to be linked (from <svg> to <img src="xyz.svg"> is itself a brittle and subtle change. If you see that difficulty, please switch to linked SVGs in your answer.
Update
I'd like the radio buttons to be vertically centered in their div, while that div is itself vertically centered and right justified in the header.
Ideally, I'd also like to be able to adjust the scale of the SVG radio button icons from the style file (although I'm starting to wonder whether doing so might be going against the grain of established custom—in other words, I'm wondering if perhaps designers end up editing the SVG files rather than manipulating the scale of the SVGs from CSS).
.header {
width: 100%;
height: 300px;
background-color: #ddd;
margin: 5px;
align-items:center;
display: block;
text-align: center;
}
.left_center_myicon {
margin: 0 auto;
background-color: #bbb;
float: left;
height: 70%; /* <==== (1) */
position: relative;
top: 50%;
left: 0;
transform: translate(0%, -50%);
}
.right_center_myicon {
background-color: #ccc;
margin: 0 auto;
float: right;
height: 70%; /* <==== (2) */
position: relative;
top: 50%;
left: 0;
transform: translate(0%, -50%);
vertical-align: middle;
}
svg { stroke:black; stroke-width:5; opacity:0.5; vertical-align: middle; }
<div class="header">
<a href="index.html">
<img class="left_center_myicon" src="svg/logo.svg"/>
</a>
<div class="right_center_myicon">
<label class="myLabel">
<input type="radio" name="radioGroup" class="myradioG" checked>
<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="30" style="fill:blue;" />
</svg>
</label>
<label class="inline-radio">
<input type="radio" name="radioGroup" class="myradioG">
<svg width="100" height="100" viewBox="0 0 100 100">
<rect x="20" y="20" rx="15" ry="15" width="60" height="60" style="fill:red;" />
</svg>
</label>
</div>
</div>
The content of logo.svg is:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="160" height="120"
viewBox="0 0 160 120"
version="1.1">
<g>
<circle cx="80" cy="60" r="50" fill="yellow" stroke="blue" stroke-width="10" />
</g>
</svg>
When in doubt, flexbox all the things. And add some wrappers... and a spacer.
I find CSS float maddening to work with, so I avoid it like the plague. And to answer your other question, whenever possible I include my svgs inline so the inner components can still be targeted/styled with CSS. This approach should work with either though.
I tried making a fiddle but couldn't get even the simplest code to work or display anything, so I'm not sure if that's me or them.... Works great locally in my browser though. https://imgur.com/AWrWK8Z
I made 2 additions, a middle spacer element set to flex grow so it takes up all the available space it can, pushing the other elements far to the right/left. And wrappers around the input/label pairs (and the lone left guy). I used flex on both the header container and the right and left child containers, to simplify vertical centering.
.header {
width: 100%;
height: 300px;
display: flex;
align-items: center;
background-color: #ddd;
}
.spacer {
flex: 1 0 auto;
background: rgba(200,200,200,1);
}
.left {
background-color: #bbb;
}
.right {
background-color: #ccc;
}
.wrapper {
display: flex;
height: 70%;
align-items: center;
outline: 1px solid blue;
}
.wrapper > div {
flex: 1 1 auto;
outline: 1px solid black;
}
<div class="header">
<div class="left wrapper">
<div>
<a>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="160" height="120"
viewBox="0 0 160 120"
version="1.1">
<g>
<circle cx="80" cy="60" r="50" fill="yellow" stroke="blue" stroke-width="10" />
</g>
</svg>
</a>
</div>
</div>
<div class="spacer"></div>
<div class="right wrapper">
<div>
<label class="myLabel">
<input type="radio" name="radioGroup" class="myradioG" checked>
<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="30" style="fill:blue;" />
</svg>
</label>
</div>
<div>
<label class="inline-radio">
<input type="radio" name="radioGroup" class="myradioG">
<svg width="100" height="100" viewBox="0 0 100 100">
<rect x="20" y="20" rx="15" ry="15" width="60" height="60" style="fill:red;" />
</svg>
</label>
</div>
</div>
</div>
I need to make a circle emulating the button for closing the window in the Mac OS. But when I try to move it lower, svg's border cuts it off. How can I move the border to place the circle directly in the middle of the panel (vertically)?
JSFiddle: https://jsfiddle.net/sm6r0kvn/2/
<div class="panel">
<svg viewbox="0 0 20 17" width="20" heigth="50"><circle r="7" cx="14" cy="9.5" fill="#fc615e"/></svg>
</div>
You can set your viewbox like <svg viewbox="0 0 20 20" width="20" heigth="20"> and then set cx and cy 50%. If you want to center it in the panel vertically just make it a flexbox and add align-items: center - see demo below:
.block {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 550px;
min-width: 480px;
width: 80vw;
height: 200px;
background: black;
border-radius: 10px 10px 5px 5px;
}
.panel {
background-color: #e0e0e0;
border-radius: 5px 5px 0 0;
display: flex; /* added */
align-items: center; /* added */
}
.text {
color: white;
padding: 5px;
}
<div class="block">
<div class="panel">
<svg viewbox="0 0 20 20" width="20" heigth="20">
<circle r="7" cx="50%" cy="50%" fill="#fc615e"/>
</svg>
</div>
<div class="text">
Text here
</div>
</div>
This is because you are drawing your cicrcle outside of the svg viewbox. You can either use CSS to move whole svg box or make it larger
svg {
border: 1px blue solid;
}
.panel.moved {
margin-left: 100px;
}
<div class="panel">
<svg viewbox="0 0 20 20" width="200" heigth="200">
<circle r="10" cx="10" cy="10" fill="#fc615e"/>
</svg>
</div>
<div class="panel">
<svg viewbox="0 0 20 20" width="200" heigth="200">
<circle r="10" cx="20" cy="10" fill="#fc615e"/>
</svg>
</div>
<div class="panel">
<svg viewbox="0 0 30 20" width="300" heigth="200">
<circle r="10" cx="20" cy="10" fill="#fc615e"/>
</svg>
</div>
<div class="panel moved">
<svg viewbox="0 0 20 20" width="200" heigth="200">
<circle r="10" cx="10" cy="10" fill="#fc615e"/>
</svg>
</div>
I am using the svg <use /> element to duplicate an icon in multiple places:
<svg class="icon icon-BusinessUnit"><use xlink:href="#icon-BusinessUnit"></use></svg>
I would like to be able to control the size of the icon and the color but I do not know how.
Changing the fill, color, width and height of .icon-BusinessUnit does not change anything.
polygon,
rect {
fill: transparent;
stroke: #fff;
stroke-width: 1;
}
g path {
stroke: #fff;
stroke-opacity: 0.6;
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/* ==========================================
Single-colored icons can be modified like so:
.icon-name {
font-size: 32px;
color: red;
}
========================================== */
.icon-Activity {
width: 10.2001953125em;
}
.icon-BusinessUnit {
width: 1.2001953125em;
}
.icon-SublevelBusinessFunction {
width: 0.900390625em;
}
.icon-SublevelBusinessUnit {
width: 0.533203125em;
}
html {
font-size: 62.5%;
overflow-y: scroll;
position: relative;
min-height: 100%;
height: 100%;
}
body {
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
line-height: 1;
background: linear-gradient(#348dc5, #00435d);
}
*,
*:before,
*:after {
box-sizing: border-box !important;
}
ul {
padding: 0;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#000000">
<link rel="shortcut icon" href="/favicon.ico">
<title>D3</title>
<style type="text/css">
/* break points */
/* be consistent with spacing to avoid random pixel adding. */
</style>
</head>
<body cz-shortcut-listen="true">
<div id="root">
<div class="gel-wrap">
<div class="gel-layout">
<div class="gel-layout__item ">
<div style="display: inline-block; position: relative; width: 100%; vertical-align: top; overflow: hidden;"><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 1300 800"><g class="vx-group vx-cluster" transform="translate(100, 100)"><g class="vx-group" transform="translate(0, 0)"><g class="vx-group" transform="translate(490, 0)"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30"></polygon><svg class="icon icon-BusinessUnit"><use xlink:href="#icon-BusinessUnit"></use></svg></g>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://localhost:8088/static/js/main.js"></script>
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-Activity">
<title>Activity</title>
<path fill="#fff" style="fill: var(--color1, #fff)" d="M0 26c0-3.314 2.686-6 6-6 0.176 0 0.352 0.010 0.524 0.024l6.45-10.75c-0.614-0.942-0.974-2.066-0.974-3.276 0-3.314 2.686-6 6-6s6 2.686 6 6c0 1.208-0.358 2.334-0.974 3.276l6.45 10.75c0.172-0.014 0.348-0.024 0.524-0.024 0.134 0 0.266 0.006 0.396 0.014l4.56 2.604c0.658 0.962 1.044 2.128 1.044 3.382 0 3.314-2.686 6-6 6s-6-2.686-6-6c0-1.208 0.358-2.334 0.974-3.276l-6.45-10.75c-0.172 0.014-0.348 0.024-0.524 0.024s-0.352-0.010-0.524-0.024l-6.45 10.75c0.614 0.942 0.974 2.066 0.974 3.274 0 3.314-2.686 6-6 6-3.314 0.002-6-2.684-6-5.998z"></path>
</symbol>
<symbol id="icon-BusinessUnit">
<title>Business Unit</title>
<path fill="#fff" style="fill: var(--color1, #fff)" d="M9.974 30.871h6.519v-6.666h3.918v6.666h6.519v-29.843h-16.955v29.843zM19.641 4.545h3.918v3.918h-3.918v-3.918zM19.641 10.842h3.918v3.918h-3.918v-3.918zM19.641 17.139h3.918v3.918h-3.918v-3.918zM13.344 4.545h3.918v3.918h-3.918v-3.918zM13.344 10.842h3.918v3.918h-3.918v-3.918zM13.344 17.139h3.918v3.918h-3.918v-3.918zM28.451 3.701h8.452v27.17h-5.935v-6.068h-2.517v-21.102zM33.835 21.936h-0v-3.567h-3.567v3.567h3.567zM33.835 16.203h-0v-3.567h-3.567v3.567h3.567zM33.835 10.47h-0v-3.567h-3.567v3.567h3.567zM0 30.871v-27.17h8.452v21.102h-2.517v6.068h-5.935zM3.068 6.903v3.567h3.567v-3.567h-3.567zM3.068 12.636v3.567h3.567v-3.567h-3.567zM3.068 18.369v3.567h3.567v-3.567h-3.567z"></path>
</symbol>
<symbol id="icon-SublevelBusinessFunction">
<title>Sublevel Business Function</title>
<path fill="#fff" style="fill: var(--color1, #fff)" d="M0.96 29.626h10.401v-9.503h6.252v9.503h10.401v-28.666h-27.053v28.666zM16.384 7.715h6.252v6.252h-6.252v-6.252zM6.337 7.715h6.252v6.252h-6.252v-6.252z"></path>
</symbol>
<symbol id="icon-SublevelBusinessUnit">
<title>Sublevel Business Unit</title>
<path fill="#fff" style="fill: var(--color1, #fff)" d="M0.561 30.314h6.318v-6.46h3.797v6.46h6.318v-28.924h-16.433v28.924zM9.93 4.798h3.797v3.797h-3.797v-3.797zM9.93 10.901h3.797v3.797h-3.797v-3.797zM9.93 17.004h3.797v3.797h-3.797v-3.797zM3.827 4.798h3.797v3.797h-3.797v-3.797zM3.827 10.901h3.797v3.797h-3.797v-3.797zM3.827 17.004h3.797v3.797h-3.797v-3.797z"></path>
</symbol>
</defs>
</svg>
</body>
</html>
Your HTML and SVG structure are quite complex so I have simplified it down to the bare minimum. You had hardcoded the fill as #fff on the PATH which made it difficult to affect the fill color of each copy of the symbol. Perhaps you have a good reason to nest SVGs inside other SVGs but as you can see, it's not necessary to achieve your desired result. (I have removed the POLYGON to further simplify the issue.)
This works, hopefully as you intended:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style>
.d1{
fill: red;
}
.d2{
fill: green;
}
.d3{
fill: orange;
}
</style>
<symbol id="icon-BusinessUnit">
<path d="M9.974 30.871h6.519v-6.666h3.918v6.666h6.519v-29.843h-16.955v29.843zM19.641 4.545h3.918v3.918h-3.918v-3.918zM19.641 10.842h3.918v3.918h-3.918v-3.918zM19.641 17.139h3.918v3.918h-3.918v-3.918zM13.344 4.545h3.918v3.918h-3.918v-3.918zM13.344 10.842h3.918v3.918h-3.918v-3.918zM13.344 17.139h3.918v3.918h-3.918v-3.918zM28.451 3.701h8.452v27.17h-5.935v-6.068h-2.517v-21.102zM33.835 21.936h-0v-3.567h-3.567v3.567h3.567zM33.835 16.203h-0v-3.567h-3.567v3.567h3.567zM33.835 10.47h-0v-3.567h-3.567v3.567h3.567zM0 30.871v-27.17h8.452v21.102h-2.517v6.068h-5.935zM3.068 6.903v3.567h3.567v-3.567h-3.567zM3.068 12.636v3.567h3.567v-3.567h-3.567zM3.068 18.369v3.567h3.567v-3.567h-3.567z"></path>
</symbol>
</defs>
<use xlink:href="#icon-BusinessUnit" class="d1" transform="translate(0 0) scale(1)"/>
<use xlink:href="#icon-BusinessUnit" class="d2" transform="translate(100 0) scale(1.5)"/>
<use xlink:href="#icon-BusinessUnit" class="d3" transform="translate(200 0) scale(2)"/>
</svg>
In future please just abbreviate the code you're providing so that we can focus on the parts which are relevant to your question. And it's always good to include a Codepen / Fiddle or similar, otherwise people may not take the time to set up one for you. See https://codepen.io/MSCAU/pen/KxybQ.
I am having trouble adjusting the icon background to be transparent but the parent container to have black on the sides of the transparent border. The attached picture says a thousand words.
I need the final work to look like the picture below. You can change the markup.
* {
font-size: 16px;
}
.home-contact {
background-image: url('https://images.unsplash.com/photo-1518666452233-523dfa23d45e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=ac4741c99f65e732e43ab8abb770fbbc');
width: 300px;
margin: 0 auto;
padding: 1rem;
}
.contact-num {
display: flex;
color: #999;
}
.icon-hold {
background: transparent;
border-radius: 100%;
border: 4px solid #000;
color: #000;
}
.icon-hold span {
padding: 1rem 1rem 0 1rem ;
font-size: 3rem;
}
.icon-text {
background: #000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.icon-text span {
padding: 0 1rem;
text-transform: uppercase;
letter-spacing: 0.1rem;
}
.triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid black;
border-bottom: 50px solid transparent;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="home-contact">
<div class="home-contact-hold">
<div class="contact-num">
<div class="icon-hold">
<span class="fa fa-whatsapp"></span>
</div>
<div class="icon-text">
<span class="book-now">Book Now</span>
<span class="book-number">0701 000 659</span>
</div>
<div class="triangle-right"></div>
</div>
</div>
</div>
Try to build an svg with http://editor.method.ac/. I built it within 5 minutes and got this:
<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<title>Layer 1</title>
<rect id="svg_2" height="154" width="283" y="112.984535" x="154.546395" stroke-width="19" stroke="#000" fill="#000000"/>
<ellipse stroke="#000" ry="77" rx="77" id="svg_1" cy="190.000002" cx="147" stroke-width="19" fill="#ffffff"/>
<line stroke="#000" stroke-linecap="null" stroke-linejoin="null" id="svg_3" y2="195.361169" x2="526.856097" y1="110.309465" x1="440.258004" fill-opacity="null" stroke-opacity="null" stroke-width="19" fill="none"/>
<line stroke="#000" transform="rotate(90 483.83575439453125,226.28903198242193) " stroke-linecap="null" stroke-linejoin="null" id="svg_4" y2="269.60908" x2="527.39255" y1="182.968967" x1="440.278994" fill-opacity="null" stroke-opacity="null" stroke-width="19" fill="none"/>
<rect stroke="#000" transform="rotate(46.41851043701172 438.45388793945307,182.47454833984375) " id="svg_5" height="85.567163" width="98.453783" y="139.690958" x="389.226988" stroke-opacity="null" stroke-width="19" fill="#000000"/>
</g>
</svg>
Maybe you need to edit it a little more, but I think this will help you out a lot.
Something along the lines of
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="home-contact">
<div class="home-contact-hold">
<div class="contact-num">
<div class="icon-hold">
<span class="fa fa-whatsapp" style="background:transparent;"></span>
</div>
<div class="icon-text">
<span class="book-now">Book Now</span>
<span class="book-number">0701 000 659</span>
</div>
<div class="triangle-right"></div>
</div>
</div>
</div>
That will give you a transparent background for the FontAwesome-Icon. That fancy rounded thing around it you will have to figure out for yourself ;-)
I am trying to implement the
http://demosthenes.info/blog/760/Create-A-Responsive-Imagemap-With-SVG
to my needs
The problem is that I want the button Ive created to change the style of a div outside the figure tag. I can not find a way to do that.
All I need is by hovering over the .my-1 button, to display the .y1 div
Here is the code so far.
<style type="text/css">
#burj-imagemap {
overflow: hidden;
padding-bottom: 75%;
vertical-align: middle;
width: 100%;
}
#burj-imagemap svg {
display: inline-block;
left: 0;
position: absolute;
top: 0;
}
.my-1:hover {background:#fff; z-index:100; opacity:0.3; filter: alpha(opacity=30); border:1px solid #000;
}
.my-1 {cursor: pointer;}
.y1 {
display: none;
}
.my-1:hover .y1 {
display: block;
background-color: #F00;
height: 250px;
width: 250px;
z-index:1000;
}
</style>
<figure id="burj-imagemap">
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 1200 808" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
<image xlink:href="http://demosthenes.info/assets/images/burj-khalifa.jpg" height="808" width="1200">
</image>
<a class="my-1" >
<g>
<defs>
<polygon id="SVGID_1_" points="322,131 62,240 79,346 274,250 412,405 501,250"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_2_)">
<image overflow="visible" width="1200" height="808" xlink:href="http://demosthenes.info/assets/images/burj-khalifa.jpg" transform="matrix(1 0 0 1 -33.5 -301)">
</image>
</g>
</g></a>
</svg>
</figure>
<div class="y1">Hi!</div>
any ideas?
You could include an event handler in the svg like this..
<g clip-path="url(#SVGID_2_)" onmouseover="document.getElementById('y1').style['display'] = 'inline';">
<div id="y1" class="y1">Hi!</div>
fiddle here http://jsfiddle.net/9mDur/