How can I display a SVG contained inside a div with Lightbox2? In the example below, I would like to load the SVG contained inside the div with the id testsvg:
<div id="testsvg">
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5">
</svg>
</div>
Test SVG!
try this
body {
position: relative;
}
#testsvg + a {
position: absolute;
top: 43%;
left: 11%;
}
<div id="testsvg">
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5">
</svg>
</div>
Test SVG!
Related
I am trying to show only text whenever the user hover on svg element(a rectangle in my case) either with CSS or JS.
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
<text class="img__description" x="50" y="100" font-family="Verdana" font-size="35" fill="blue">Hello</text>
</svg>
I would appreciate any help.
You can add css styles to the elements of the svg, e.g. display: none.
Working example:
svg:hover rect {
display: none;
}
svg text {
display: none;
}
svg:hover text {
display: block;
}
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"
/>
<text class="img__description" x="50" y="100" font-family="Verdana" font-size="35" fill="blue">Hello</text>
</svg>
I am trying to create 4 svg based charts one below another.
After charts are loaded, I can see only 2 and half charts which get occupied on web browser without scrolling.
I can see scroll bars enabled in left and at the bottom but they don't scroll much.
<div overflow="auto">
<svg id="chart1" style="overflow-y:scroll"></svg>
<svg id="chart2" style="overflow-y:scroll"></svg>
<svg id="chart3" style="overflow-y:scroll"></svg>
<svg id="chart4" style="overflow-y:scroll"></svg>
</div>
Above are 4 svg and below is the css for each of them.
#chart1 {
width: 100%;
height: 100%;
position: absolute;
}
When I minimize the webpage, I can see 4 charts otherwise 2 and half only.
What all I have tried:
1. enabling auto-scroll for html, body
2. enabling scroll in svg (similar to above code).
3. increasing html and body height and width.
html, body {
width: 100%;
height: 200%;
margin: 0px;
padding: 0px;
}
Here is a example on jsfiddle, each svg has a data-no, and one common class. It is more easy with this example for you to explain what you expect exactly...
https://jsfiddle.net/ericsm/ondtxmp2/
and here the code too :
each svg take 100% of body.
<HTML>
<HEAD>
<style type="text/css">
.container-charts {
border:solid 8px blue;
div : 100%;
}
.chart {
width: 100%;
height: 100%;
border:dashed 2px green;
}
html, body {
margin: 0px;
padding: 0px;
}
</style>
</HEAD>
<BODY>
<div class="container-charts" overflow="auto">
<svg class="chart" data-no="1">
<ellipse cx="100" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
<svg class="chart" data-no="2">
<ellipse cx="100" cy="80" rx="100" ry="50" style="fill:blue;stroke-width:2" />
</svg>
<svg class="chart" data-no="3">
<ellipse cx="100" cy="80" rx="100" ry="50" style="fill:gray;stroke-width:2" />
</svg>
<svg class="chart" data-no="3">
<ellipse cx="100" cy="80" rx="100" ry="50" style="fill:black;stroke-width:2" />
</svg>
</div>
</BODY>
</HTML>
Svg image convert canvas to png but chrome browser is error: Tainted canvases may not be exported But Firefox is not error and image save and download.
my svg object:
I think error source can be foreignobject.because I remove this object,chrome not error.it has to stay svg inside
<svg xmlns="http://www.w3.org/2000/svg" id="drawcontentssvg" width="410" height="230" viewBox="-100 -70 410 230">
<defs><filter x="0" y="0" width="1" height="1" id="dhx_text_background">
<feFlood flood-color="white"></feFlood>
<feComposite in="SourceGraphic"></feComposite>
</filter></defs>
<g id="shapeImg" shape-rendering="crispedges">
<g transform="translate(0,0) rotate(0,105,45)" dhx_id="1">
<rect class="dhx_item_shape" id="1" height="90" width="210" fill="white" rx="1" ry="1" stroke="#FF9800" stroke-width="1"></rect>
<foreignObject overflow="hidden" transform="translate(0 0)" width="210" height="90"><div class="shape_content" style="height: 90px;">
<div style="text-align: center; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: rgba(0, 0, 0, 0.38); font-size: 14px; line-height: 17px; margin-top: 25px; white-space: nowrap; text-transform: uppercase;">fsfsfsfsf</div>
<div style="text-align: center;"></div></div>
</foreignObject>
<rect height="3.5" width="210" stroke="#FF9800" fill="#FF9800" stroke-width="1"></rect>
</g>
</g>
</svg>
When I move the mouse over the element I need to find the offsetX position. The problem is that when I move the mouse I'm getting the value for the child element which is present inside. Is it possible to identify the mouse position of my main object even if I move my mouse in child target?
I'm not able to use event.pageX because I'm using transform: scale(1) for the element.
$('.main').on('mousemove', function(event) {
event.preventDefault();
$(this).closest('.outer').find('p').html(event.offsetX);
});
<style> * {
margin: 0;
}
.outer {
border: 1px solid #ff0000;
float: left;
margin: 10px;
padding: 5px;
overflow: hidden
}
.inner > svg {
width: 100;
height: 100px;
}
.inner {
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
transform-origin: 0 0;
}
.two {
-ms-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.three {
-ms-transform: scale(.5);
-webkit-transform: scale(.5);
transform: scale(.5);
}
p {
position: relative;
z-index: 1;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner one">
<svg style="border:1px solid #000" class="main">
<g transform="translate(10, 10)" stroke="#000000" fill="#ffffff" stroke-width="1" data-id="16">
<foreignObject style="overflow:visible;" pointer-events="all" width="100" height="100">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" pointer-events="all"></rect>
<foreignObject style="overflow:visible;" pointer-events="all" width="100%" height="100%">
<div class="labelwrapper" xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%;">
<div class="labelcontent" contenteditable="true" style="height:100%;">Sample</div>
</div>
</foreignObject>
</svg>
</foreignObject>
</g>
</svg>
</div>
<p>Value</p>
</div>
<div class="outer">
<div class="inner two">
<svg style="border:1px solid #000" class="main">
<g transform="translate(10, 10)" stroke="#000000" fill="#ffffff" stroke-width="1" data-id="16">
<foreignObject style="overflow:visible;" pointer-events="all" width="100" height="100">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" pointer-events="all"></rect>
<foreignObject style="overflow:visible;" pointer-events="all" width="100%" height="100%">
<div class="labelwrapper" xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%;">
<div class="labelcontent" contenteditable="true" style="height:100%;">Sample</div>
</div>
</foreignObject>
</svg>
</foreignObject>
</g>
</svg>
</div>
<p>Value</p>
</div>
<div class="outer">
<div class="inner three">
<svg style="border:1px solid #000" class="main">
<g transform="translate(10, 10)" stroke="#000000" fill="#ffffff" stroke-width="1" data-id="16">
<foreignObject style="overflow:visible;" pointer-events="all" width="100" height="100">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" pointer-events="all"></rect>
<foreignObject style="overflow:visible;" pointer-events="all" width="100%" height="100%">
<div class="labelwrapper" xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%;">
<div class="labelcontent" contenteditable="true" style="height:100%;">Sample</div>
</div>
</foreignObject>
</svg>
</foreignObject>
</g>
</svg>
</div>
<p>Value</p>
</div>
I Found the answer by change the script as given below.
$('.main').on('mousemove', function(event) {
event.preventDefault();
if($(event.target).attr('class')== 'main')
$(this).closest('.outer').find('p').html(event.offsetX);
else{
var val = parseInt($(event.target).closest('g').attr('transform').split(/[()]/)[1].split(',')[0]);
$(this).closest('.outer').find('p').html(event.offsetX+val);
}
});
I have this svg, but I can't zoom in and zoom out using this. I found svg-pan-zoom.js file and tried in it. Still not working.
<svg id="no.1" viewBox="0 0 2500 2500" transform="translate(100 100)">
<svg viewBox="0 0 2500 2500" id="raptor" style="position:absolute; top: 40px; left: 40px;">
<rect id="rapt" x="50" y="60" rx="20" ry="20" width="90" height="140" style="fill:#FFB3B3;stroke:black;stroke-width:5;">
</rect>
</rect>
</svg>