SVG mask used in SVG embedded in HTML document not working - html
I am making an HTML document version of a griefer list for Dredark.io because the ship I made that had the list was ruined. An idiot I thought was my friend went promoting everyone who joined to captain rank and they all messed EVERYTHING up. However, I am having issues with the portion that shows the last seen appearance of each griefer: the SVG mask="url(#face/body/legs/hand)" attribute is not working.
<!DOCTYPE html>
<html>
<head>
<title>Dredark.io Griefers</title>
<script>
var list = {
"clown": {
warning: 15,
hair: "none",
skin: "#ff8800",
shirt: "#111111",
pants: "#000000",
proof: "Many people know him as a griefer"
},
"SMARTLABRAT": {
warning: 1,
hair: "none",
skin: "#ffeeaa",
shirt: "#11aa11",
pants: "#1122aa",
proof: "none"
}
};
function load(){
var max = 0;
var sorted = [];
for(var prop in list){
if(list[prop].warning >= max){
max = list[prop].warning;
}
}
var cur = max;
for(var i = max; i > 0; i--){
for(var prop in list){
if(list[prop].warning == i){
sorted.push(prop);
}
}
}
var html = "";
var warningColors = ["#00ff00","#44ff00","#88ff00","#aaff00","#ffff00","#ffaa00","#ff8800","#ff4400","#ff0000"];
for(var i = 0; i < sorted.length; i++){
var color = "";
for(var j = 0; j < warningColors.length; j++){
if(list[sorted[i]].warning >= (j * 10)){
color = warningColors[j];
}
}
html = "<tr><td>" + (i + 1) + "</td><td>" + sorted[i] + "</td><td style='background: " + color + ";'>" + list[sorted[i]].warning + "</td><td>" + list[sorted[i]].proof + "</td><td>" + document.getElementById("skin").outerHTML.replace(/!----/g,"#00ff00").replace("!_---","#222222").replace("!-_--","#111111") + "</td></tr>";
document.getElementById("list").innerHTML += html;
}
}
window.onload = function(){
load();
};
</script>
<style>
#list{
border: 1px solid #004400;
}
#prototypes{
display: none;
}
</style>
</head>
<body>
<details>
<summary>Because the previous one was ruined</summary>
<p>by <b>La Danse Macabre</b>, someone I trusted.</p>
<details>
<summary>Note to <b>La Danse Macabre</b>:</summary>
<p>Do not promote random people to <u>Captain</u> on <b>MY</b> ships!</p>
</details>
</details>
<p>The warning level of a griefer depends on how many ships they griefed and how much hard work is lost to them per ship. Griefers with a level below <code>20</code> are not really that bad and can still be trusted. Griefers with a level of less than <code>5</code> mean that they are possible but not proven.</p>
<div id="prototypes">
<svg id='skin' xmlns='http://www.w3.org/2000/svg' width='50px' height='80px' viewbox='0 0 50 80'>
<defs>
<mask maskContentUnits="userSpaceOnUse" id="face" width="50" height="80" viewbox="0 0 50 80"><image href="https://test.drednot.io/img/player_head.png" x="0" y="0"/></mask>
<mask maskContentUnits="userSpaceOnUse" id="body"><image href="https://test.drednot.io/img/player.png" x="17" y="7"/>
<image href="https://test.drednot.io/img/player_arm.png" x="20" y="-5"/></mask>
<mask maskContentUnits="userSpaceOnUse" id="legs"><image href="https://test.drednot.io/img/player_leg.png" x="17" y="8"/>
<image href="https://test.drednot.io/img/player_leg.png" x="20" y="8"/></mask>
<mask maskContentUnits="userSpaceOnUse" id="hand"><image href="https://test.drednot.io/img/player_hand.png" x="19" y="-5"/></mask>
</defs>
<rect x="0" y="0" width="100" height="100" fill="!----" mask="url(#face)"/>
<rect x="0" y="0" width="100" height="100" fill="!_---" mask="url(#body)"/>
<rect x="0" y="0" width="100" height="100" fill="!-_--" mask="url(#legs)"/>
<rect x="0" y="0" width="100" height="100" fill="!----" mask="url(#hand)"/>
<image href="https://test.drednot.io/img/player_face.png" x="0" y="0"/>
<image href="https://test.drednot.io/img/player_foot.png" x="17" y="8"/>
<image href="https://test.drednot.io/img/player_foot.png" x="20" y="8"/>
</svg>
</div>
<table id="list" border="1" cellSpacing="0px">
<tr>
<th>#</th>
<th>Name</th>
<th>Warning level</th>
<th>Proof</th>
<th>Last seen appearance</th>
</tr>
</table>
</body>
</html>
As its own file, the SVG image DOES support it, but for some reason when I embed it within the HTML document it just stops working. The best I can do is make the whole thing disappear. I have tried everything and I have been searching the whole web for a fix but I have lost all hope other than you kind people. What am I doing wrong and how do I fix this?
Svg <mask> won't be applied, if your svg containing it is hidden via display: none.
But you can hide it like so
#prototypes {
position: absolute;
width.0;
height: 0;
overflow: hidden;
}
This also applies to other svg elements like <clipPath> or filters.
So It's actually a better practice to hide your svg containing all assets and definitions this way.
Workin example
var list = {
"clown": {
warning: 15,
hair: "none",
skin: "#ff8800",
shirt: "#111111",
pants: "#000000",
proof: "Many people know him as a griefer"
},
"SMARTLABRAT": {
warning: 1,
hair: "none",
skin: "#ffeeaa",
shirt: "#11aa11",
pants: "#1122aa",
proof: "none"
}
};
function load() {
var max = 0;
var sorted = [];
for (var prop in list) {
if (list[prop].warning >= max) {
max = list[prop].warning;
}
}
var cur = max;
for (var i = max; i > 0; i--) {
for (var prop in list) {
if (list[prop].warning == i) {
sorted.push(prop);
}
}
}
var html = "";
var warningColors = ["#00ff00", "#44ff00", "#88ff00", "#aaff00", "#ffff00", "#ffaa00", "#ff8800", "#ff4400", "#ff0000"];
for (var i = 0; i < sorted.length; i++) {
var color = "";
for (var j = 0; j < warningColors.length; j++) {
if (list[sorted[i]].warning >= (j * 10)) {
color = warningColors[j];
}
}
html = "<tr><td>" + (i + 1) + "</td><td>" + sorted[i] + "</td><td style='background: " + color + ";'>" + list[sorted[i]].warning + "</td><td>" + list[sorted[i]].proof + "</td><td>" + document.getElementById("skin").outerHTML.replace(/!----/g, "#00ff00").replace("!_---", "#222222").replace("!-_--", "#111111") + "</td></tr>";
document.getElementById("list").innerHTML += html;
}
}
window.onload = function() {
load();
};
#list {
border: 1px solid #004400;
}
#prototypes {
position: absolute;
width.0;
height: 0;
overflow: hidden;
}
<details>
<summary>Because the previous one was ruined</summary>
<p>by <b>La Danse Macabre</b>, someone I trusted.</p>
<details>
<summary>Note to <b>La Danse Macabre</b>:</summary>
<p>Do not promote random people to <u>Captain</u> on <b>MY</b> ships!</p>
</details>
</details>
<p>The warning level of a griefer depends on how many ships they griefed and how much hard work is lost to them per ship. Griefers with a level below <code>20</code> are not really that bad and can still be trusted. Griefers with a level of less than <code>5</code> mean that they are possible but not proven.</p>
<div id="prototypes">
<svg aria-hidden="true" id='skin' xmlns='http://www.w3.org/2000/svg' width='50px' height='80px' viewbox='0 0 50 80'>
<defs>
<mask maskContentUnits="userSpaceOnUse" id="face" width="50" height="80" viewbox="0 0 50 80"><image href="https://test.drednot.io/img/player_head.png" x="0" y="0"/></mask>
<mask maskContentUnits="userSpaceOnUse" id="body"><image href="https://test.drednot.io/img/player.png" x="17" y="7"/>
<image href="https://test.drednot.io/img/player_arm.png" x="20" y="-5"/></mask>
<mask maskContentUnits="userSpaceOnUse" id="legs"><image href="https://test.drednot.io/img/player_leg.png" x="17" y="8"/>
<image href="https://test.drednot.io/img/player_leg.png" x="20" y="8"/></mask>
<mask maskContentUnits="userSpaceOnUse" id="hand"><image href="https://test.drednot.io/img/player_hand.png" x="19" y="-5"/></mask>
</defs>
<rect x="0" y="0" width="100" height="100" fill="!----" mask="url(#face)"/>
<rect x="0" y="0" width="100" height="100" fill="!_---" mask="url(#body)"/>
<rect x="0" y="0" width="100" height="100" fill="!-_--" mask="url(#legs)"/>
<rect x="0" y="0" width="100" height="100" fill="!----" mask="url(#hand)"/>
<image href="https://test.drednot.io/img/player_face.png" x="0" y="0"/>
<image href="https://test.drednot.io/img/player_foot.png" x="17" y="8"/>
<image href="https://test.drednot.io/img/player_foot.png" x="20" y="8"/>
</svg>
</div>
<table id="list" border="1" cellSpacing="0px">
<tr>
<th>#</th>
<th>Name</th>
<th>Warning level</th>
<th>Proof</th>
<th>Last seen appearance</th>
</tr>
</table>
Related
CSS styles not applied to SVG when SVG is rendered on Canvas
I am styling an SVG image using CSS in a separate file. Then I am rendering the SVG onto a canvas that can be saved as a PNG.
The SVG receives the CSS styles properly when it is just an SVG element on an HTML page, and renders as expected. However, when the SVG is rendered in a canvas element, the styles are not applied.
Is it possible to use external CSS to style an SVG and save that to a canvas without losing the styles? I cannot use inline CSS due to Content Security Policy in the browser.
Here is a sample.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>svg to png</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<button>svg to png</button>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="200" height="200">
<path d="M10 40, C20 20, 50 20, 70 30, 70 30, 110 50, 160 20" id="path-1" fill="#CCCCCC" />
<text class="text-red">
<textpath xlink:href="#path-1" startOffset="50%" text-anchor="middle">Sample Path Text</textpath>
</text>
<rect x="10" y="14" width="10" height="10" />
<text x="0" y="100" class="text-primary">Text Style 1</text>
<text x="0" y="150" class="text-secondary">Text Style 2</text>
</svg>
<canvas id="canvas"></canvas>
<script src="./script.js"></script>
</body>
</html>
style.css
.text-primary {
font-size: 24px;
font-family: calibri;
}
.text-secondary {
font-size: 12px;
font-family: arial;
}
.text-red {
fill: #ff0000;
}
script.js
var btn = document.querySelector("button");
var svg = document.querySelector("svg");
var canvas = document.querySelector("canvas");
btn.addEventListener("click", function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = new XMLSerializer().serializeToString(svg);
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svgBlob = new Blob([data], { type: "image/svg+xml;charset=utf-8" });
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
var imgURI = canvas
.toDataURL("image/png")
.replace("image/png", "image/octet-stream");
};
img.src = url;
});
Here is a render of the basic example, svg on the left and canvas on the right.
css styles applied to svg on left, css styles not applied to svg on canvas on right
VBA - Get the content data table inside the JavaScript [closed]
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I'm having problem with getting td-content. It seems the data display using javascript, need to pull pictures data.
Table data:
Already try using the basic scrape, but can't collected the data.
VBA Code:
post = Trim(doc.getElementsByClassName("chart-content-container")(5).getElementsByTagName("table")(0).getElementsByTagName("tbody")(0).getElementsByTagName("tr")(1).innerText)
the data i want to get is from here (required login to see data, basically login using facebook):
fanpagedata
html
<div id="id1355">
<span class="chart-container" id="id12c4">
<div class="chart-title">Types of posts</div>
<div class="chart-content-container">
<div class="chart-content-sameInnerHeight" style="margin-top: 50px;" id="id1302">
<div id="id1355">
<div style="position: relative;">
<div id="dashboard9566356">
<div style="position: relative;" id="chartDiv9566356"><div style="position: relative;"><div dir="ltr" style="position: relative; width: 563px; height: 200px;"><div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;" aria-label="A chart."><svg width="563" height="200" aria-label="A chart." style="overflow: hidden;"><defs id="defs"></defs><g><path d="M282,23.5L282,10A90,90,0,0,1,341.68103924167156,32.63403266460091L332.72888335542086,42.73892776491077A76.5,76.5,0,0,0,282,23.5" stroke="#ffffff" stroke-width="1" fill="#c2185b"></path></g><g><path d="M263.6923516820019,25.722950966907007L260.4615902141199,12.615236431655305A90,90,0,0,1,282,10L282,23.5A76.5,76.5,0,0,0,263.6923516820019,25.722950966907007" stroke="#ffffff" stroke-width="1" fill="#f57c00"></path></g><g><path d="M206.0577711314989,109.22105603953229L192.65620133117517,110.84830122297916A90,90,0,0,1,260.4615902141197,12.615236431655333L263.69235168200174,25.722950966907035A76.5,76.5,0,0,0,206.0577711314989,109.22105603953229" stroke="#ffffff" stroke-width="1" fill="#8ecbd3"></path></g><g><path d="M332.72888335542086,42.73892776491077L341.68103924167156,32.63403266460091A90,90,0,1,1,192.6562013311751,110.84830122297903L206.05777113149887,109.22105603953219A76.5,76.5,0,1,0,332.72888335542086,42.73892776491077" stroke="#ffffff" stroke-width="1" fill="#5c6fda"></path></g><g><g><g><text text-anchor="end" x="535" y="20.491718170580963" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#6d90cb">Links</text></g><g><text text-anchor="end" x="535" y="39.90828182941904" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#9e9e9e">11.5%</text></g></g><g><path d="M319.5,26.5L384,26.5L384,26.5L535.5,26.5" stroke="#636363" stroke-width="1" stroke-opacity="0.7" fill-opacity="1" fill="none"></path><circle cx="319.5" cy="26.5" r="2" stroke="none" stroke-width="0" fill-opacity="0.7" fill="#636363"></circle></g><g><g><text text-anchor="end" x="535" y="168.49171817058095" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#6d90cb">Pictures</text></g><g><text text-anchor="end" x="535" y="187.90828182941902" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#9e9e9e">61.5%</text></g></g><g><path d="M321.5,174.5L384,174.5L384,174.5L535.5,174.5" stroke="#636363" stroke-width="1" stroke-opacity="0.7" fill-opacity="1" fill="none"></path><circle cx="321.5" cy="174.5" r="2" stroke="none" stroke-width="0" fill-opacity="0.7" fill="#636363"></circle></g><g><g><text text-anchor="start" x="28" y="54.49171817058097" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#6d90cb">Videos</text></g><g><text text-anchor="start" x="28" y="73.90828182941904" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#9e9e9e">23.1%</text></g></g><g><path d="M209.5,60.5L180,60.5L180,60.5L28.5,60.5" stroke="#636363" stroke-width="1" stroke-opacity="0.7" fill-opacity="1" fill="none"></path><circle cx="209.5" cy="60.5" r="2" stroke="none" stroke-width="0" fill-opacity="0.7" fill="#636363"></circle></g><g><g><text text-anchor="start" x="28" y="19.491718170580963" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#6d90cb">Status</text></g><g><text text-anchor="start" x="28" y="38.90828182941904" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#9e9e9e">3.8%</text></g></g><g><path d="M268.5,18.5L180,18.5L180,25.5L28.5,25.5" stroke="#636363" stroke-width="1" stroke-opacity="0.7" fill-opacity="1" fill="none"></path><circle cx="268.5" cy="18.5" r="2" stroke="none" stroke-width="0" fill-opacity="0.7" fill="#636363"></circle></g></g><g></g></svg><div aria-label="A tabular representation of the data in the chart." style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;"><table><thead><tr><th>Status</th><th>Wert</th></tr></thead><tbody><tr><td>Links</td><td>3</td></tr><tr><td>Pictures</td><td>16</td></tr><tr><td>Videos</td><td>6</td></tr><tr><td>Status</td><td>1</td></tr></tbody></table></div></div></div><div aria-hidden="true" style="display: none; position: absolute; top: 210px; left: 573px; white-space: nowrap; font-family: Arial; font-size: 12px;">3.8%</div><div></div></div></div>
<div id="control9566356"></div>
</div>
<div id="id13ad" style="display:none"></div>
</div>
<script type="text/javascript"> var chart9566356; var data9566356;var options9566356;
var vAxisFormat9566356 = 'decimal';function drawVisualization9566356() {options9566356 = {curveType: 'none', fontName: 'Arial', 'lineWidth':2, 'height':200, backgroundColor: { fill: 'transparent' },'legend': {'position': 'labeled', 'alignment': 'center' , textStyle: {color: '#6d90cb'}}, chartArea: { },tooltip :{ isHtml : 'true'},'interpolateNulls' : true, pieHole: 0.85, pieSliceText: 'none', chartArea: { width: '90%', height: '90%', left: '5%', top: '5%' }, series: {0: {targetAxisIndex: 0,areaOpacity :1.0,type: 'area',dataOpacity :1.0},1: {targetAxisIndex: 0,areaOpacity :1.0,type: 'area',dataOpacity :1.0},2: {targetAxisIndex: 0,areaOpacity :1.0,type: 'area',dataOpacity :1.0},3: {targetAxisIndex: 0,areaOpacity :1.0,type: 'area',dataOpacity :1.0} }, vAxes: { 0: {format: 'decimal'}, 1: {format: 'decimal'} },colors: ['#c2185b','#5c6fda','#8ecbd3','#f57c00'],animation:{ duration: 500, easing: 'out', },hAxis:{ textStyle: { },gridlines: {color: 'transparent'},'baselineColor': '#ccc'},vAxis: {format: vAxisFormat9566356, textStyle: { },gridlines: {color: 'transparent'},'baselineColor': '#ccc'} };
chart9566356 = new google.visualization.PieChart(document.getElementById('chartDiv9566356'));
data9566356 = new google.visualization.DataTable();data9566356.addColumn('string', 'Status'); data9566356.addColumn('number', 'Wert');data9566356.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}}); data9566356.addColumn({type:'string', role:'annotationText'}); data9566356.addColumn({type:'string', role:'annotationText'}); data9566356.addColumn({type:'string', role:'annotationText'}); data9566356.addRows([['Links',3.0,'<div class="name">Links</div><div class="value">3</div>',null,'0','link'],['Pictures',16.0,'<div class="name">Pictures</div><div class="value">16</div>',null,'0','photo'],['Videos',6.0,'<div class="name">Videos</div><div class="value">6</div>',null,'0','video'],['Status',1.0,'<div class="name">Status</div><div class="value">1</div>',null,'0','status']]);
var numberFormatter = new google.visualization.NumberFormat({ fractionDigits: 0 }); for (var i = 1; i < data9566356.getNumberOfColumns(); i++) { if(data9566356.getColumnType(i) === "number"){ numberFormatter.format(data9566356, i); }}
var selectListener9566356 = google.visualization.events.addListener(chart9566356, 'select',function(){ var selection = chart9566356.getSelection(); for (var i = 0; i < selection.length; i++) { var item = selection[i]; if (item.row != null && item.column != null) {var idsColumnNumber = item.column +2;var id = data9566356.getValue(item.row, idsColumnNumber);if(id != null) { id = id.replace('#', ''); } Wicket.Ajax.get({ u: './ClashofClans?38-1.IBehaviorListener.0-fanPageKarmaPanel-resultContainer-graphenPanel-graphenTimesAndTypesPanelContainer-graphenTimesAndTypesPanel-content-postTypePanel-postTypePanel'+'&id='+id+'&datum='+data9566356.getValue(item.row, idsColumnNumber+1)+'&anzahl='+data9566356.getValue(item.row, item.column)+'&page_identifier='+data9566356.getValue(item.row, idsColumnNumber+2)+'&spalte='+item.column}); } else { try {var id = data9566356.getValue(item.row, 7); Wicket.Ajax.get({ u: './ClashofClans?38-1.IBehaviorListener.0-fanPageKarmaPanel-resultContainer-graphenPanel-graphenTimesAndTypesPanelContainer-graphenTimesAndTypesPanel-content-postTypePanel-postTypePanel'+'&id='+id+'&page_identifier='+id}); } catch(e) { var id = data9566356.getValue(item.row, 5); Wicket.Ajax.get({ u: './ClashofClans?38-1.IBehaviorListener.0-fanPageKarmaPanel-resultContainer-graphenPanel-graphenTimesAndTypesPanelContainer-graphenTimesAndTypesPanel-content-postTypePanel-postTypePanel'+'&id='+id+'&page_identifier='+id}); } } } });placeMarker9566356 = function(graph , dataTable) {
};placeMarkerListener9566356 = google.visualization.events.addListener(chart9566356
, 'ready',placeMarker9566356.bind(chart9566356
, chart9566356
, data9566356));
chart9566356.draw(data9566356,options9566356);}function reDrawChart9566356() { if (!$('#chartDiv9566356').is(':visible')) { return; } google.visualization.events.removeListener(placeMarkerListener9566356);
placeMarkerListener9566356 = google.visualization.events.addListener(chart9566356
, 'ready', placeMarker9566356.bind(chart9566356
, chart9566356
, data9566356));
options9566356 = {curveType: 'none', fontName: 'Arial', 'lineWidth':2, 'height':200, backgroundColor: { fill: 'transparent' },'legend': {'position': 'labeled', 'alignment': 'center' , textStyle: {color: '#6d90cb'}}, chartArea: { },tooltip :{ isHtml : 'true'},'interpolateNulls' : true, pieHole: 0.85, pieSliceText: 'none', chartArea: { width: '90%', height: '90%', left: '5%', top: '5%' }, series: {0: {targetAxisIndex: 0,areaOpacity :1.0,type: 'area',dataOpacity :1.0},1: {targetAxisIndex: 0,areaOpacity :1.0,type: 'area',dataOpacity :1.0},2: {targetAxisIndex: 0,areaOpacity :1.0,type: 'area',dataOpacity :1.0},3: {targetAxisIndex: 0,areaOpacity :1.0,type: 'area',dataOpacity :1.0} }, vAxes: { 0: {format: 'decimal'}, 1: {format: 'decimal'} },colors: ['#c2185b','#5c6fda','#8ecbd3','#f57c00'],animation:{ duration: 500, easing: 'out', },hAxis:{ textStyle: { },gridlines: {color: 'transparent'},'baselineColor': '#ccc'},vAxis: {format: vAxisFormat9566356, textStyle: { },gridlines: {color: 'transparent'},'baselineColor': '#ccc'} };
chart9566356.draw(data9566356,options9566356);}$('body').off('redrawAfterResize.chart9566356').on('redrawAfterResize.chart9566356', function() { reDrawChart9566356(); }); if (typeof googleChartApiLoaded !== 'undefined' && googleChartApiLoaded) { drawVisualization9566356();} else { google.setOnLoadCallback(drawVisualization9566356);}</script>
</div>
</div>
<p class="chart-footer-note">Here you can see the mixture of post types. Find out which types of posts are used most often in the selected time period. Generally speaking, it is good advice to try out all post types and entertain fans with a good mixture.</p>
</div>
</span>
Please, does anyone know how to scrape this?
You can gather all the td elements and loop testing for presence of the word Pictures then take node at next index:
Dim list As Object, i As Long
Set list = doc.querySelectorAll(".chart-content-container td")
For i = 0 To list.Length - 1
If Trim$(list.Item(i).innerText) = "Pictures" Then
Debug.Print list.Item(i + 1).innerText
Exit For
End If
Next
Drag an image and drop on top of a SVG element
I've created two circles using SVG and an image. I'm trying to drag the image into the circles and while I'm able to do so after dropping the image it is not being visible. How can I drop it on top of the circles.
<!DOCTYPE html>
<html>
<body>
<div id="circle" >
<svg id="dest" ondrop="drop(event)" ondragover="allowDrop(event)" width="250" height="100">
<circle id="yelcirc" cx="50" cy="50" r="50" fill="yellow" />
<circle id="greencirc" cx="160" cy="50" r="50" fill="green" />
</svg>
</div>
<img id="draglogo" src="logo.gif" draggable="true" ondragstart="drag(event)" class="draggable" ondragend="" width="105" height="73">
</body>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</html>
Apparently the ondrop and ondragover events are not detected on your svg tag. On top of that, images in SVG don't have the same syntax than in regular HTML.
This is a simple example of how you can achieve the basics of what you want to do, of course there are some adjustments to do, the position of the image, its size etc. So basically what i do here is getting the original image attributes to create an SVG image. You could also have a regular image placed outside of the SVG tag, but i'm not sure it will be easier for positioning and such.
You can also read this answer about emulating the drag events on SVG elements
NOTE: this works only for the first drag, even if the image still looks draggable after being moved, the function will throw an error because of the way img is selected from the DOM, it has been removed, so the img tag is not found anymore.
<!DOCTYPE html>
<html>
<body>
<div id="circle" ondrop="drop(event)" ondragover="allowDrop(event)" >
<svg id="dest" width="250" height="100">
<circle id="yelcirc" cx="50" cy="50" r="50" fill="yellow" />
<circle id="greencirc" cx="160" cy="50" r="50" fill="green" />
</svg>
</div>
<img id="draglogo" src="https://placeimg.com/105/73/any" draggable="true" ondragstart="drag(event)" class="draggable" ondragend="" width="105" height="73">
</body>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text"),
img = document.getElementById(data),
imgSrc = img.getAttribute('src'),
imgW = img.getAttribute('width'),
imgH = img.getAttribute('height'),
//for example you can calculate X position from event circle
imgX = ev.target.getAttribute('cx') - ev.target.getAttribute('r');
ev.target.parentElement.innerHTML += '<image xlink:href="' + imgSrc + '" x="' + imgX + '" y="0" width="' + imgW + 'px" height="' + imgH + 'px"/>';
img.parentNode.removeChild(img);
}
</script>
</html>
Chrome Memory Leak with moving SVG text and blur filter
I have a page with several SVG elements and each of them has an SVG Blur filter applied to it. I noticed that Chrome was running out of memory quickly if the elements keep moving continuously.
To reproduce check this codepen: http://codepen.io/anon/pen/xZJMVz
<html>
<head>
<meta charset="UTF-8">
<style> body {padding: 0; margin: 0;} </style>
<svg height="0" width="0">
<defs>
<filter id="f1">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
</defs>
</svg>
</head>
<body>
<svg height="30" style="position: absolute; top: 100px; width: 1000px;height: 500px;">
<text x="0" y="15" fill="black" id="t0">BLUR TEST!</text>
</svg>
<script>
(function() {
var svgText = document.getElementById('t0');
svgText.setAttribute('filter', 'url(#f1)');
var x = 0;
var y = 0;
setInterval(function(){
x+=1;
y+=1;
if(x > 1000) {
x = 0;
}
if( y > 500) {
y = 0;
}
svgText.setAttribute('transform', 'translate(' + x + ',' + y + ')');
}, 100);
})();
</script>
</body>
</html>
Open Chrome's Task Manager and notice memory usage by that tab. I filed a bug report on Chromium's Issue tracker. But wondering if anybody has run into this before and if there's a work around to this.
Thanks!
edit: Noticing this issue on Chrome 48.0.2564.97 m on Windows 7.
i have Multiple svg elements when mouseover on 1 element all element must be show text hover at a same time
I have Multiple SVG elements when mouseover on 1 element all element must be show text hover at a same time..
How i can do this?
Here is my code...
<html>
<head>
<title>conservedClusters_FRAAL_16</title>
</head>
<body>
<svg width="1500" height="500" xmlns="http://www.w3.org/2000/svg" version="1.1">
<style>
.tooltip{
font-size: 16px;
font-family: Times New Roman;
}
.tooltip_bg{
fill: white;
stroke: black;
stroke-width: 1;
opacity: 0.9;
}
</style>
<script type="text/ecmascript">
<![CDATA[
function init(evt)
{
if ( window.svgDocument == null )
{
svgDocument = evt.target.ownerDocument;
}
tooltip = svgDocument.getElementById('tooltip');
tooltip_bg = svgDocument.getElementById('tooltip_bg');
}
function ShowTooltip(evt, mouseovertext, xpos, ypos)
{
tooltip.firstChild.data = mouseovertext;
length = tooltip.getComputedTextLength();
if (length + xpos > 1500)
{
xpos=1500-length-10;
}
tooltip.setAttributeNS(null,"x",xpos+3);
tooltip.setAttributeNS(null,"y",ypos+13);
tooltip.setAttributeNS(null,"visibility","visible");
length = tooltip.getComputedTextLength();
tooltip_bg.setAttributeNS(null,"width",length+8);
tooltip_bg.setAttributeNS(null,"x",xpos);
tooltip_bg.setAttributeNS(null,"y",ypos);
tooltip_bg.setAttributeNS(null,"visibility","visibile");
}
function HideTooltip(evt)
{
tooltip.setAttributeNS(null,"visibility","hidden");
tooltip_bg.setAttributeNS(null,"visibility","hidden");
}
function writeConsole(content,linkaddress,linktext,winTitle) {
top.consoleRef=window.open('','myconsole',
'',//'width=350,height=250'
+',menubar=0'
+',toolbar=1'
+',status=0'
+',scrollbars=1'
+',resizable=1')
top.consoleRef.document.writeln(
'<html><head><title>'+winTitle+'</title></head>'
+'<body bgcolor=white onLoad="self.focus()">'
+''+linktext+''+
'<p><font face="courier">'+content+'</font></p>'
+'</body></html>'
)
top.consoleRef.document.close()
}
function onGeneMouseOver(evt,strokecolor,colorval)
{
var gene = evt.target;
var parent = gene.parentNode;
var others = parent.getElementsByTagName('path');
for (var i=0,len=others.length;i<len;++i)
{
others[i].style.stroke=strokecolor;
others[i].style.fill=colorval;
//others[i].setAttribute("style", "stroke-linecap: square; stroke-linejoin: miter; fill:"+colorval+"; stroke:"+strokecolor+"; stroke-width:1");
}
}
]]>
</script>
<g class="all1303" onmouseover="onGeneMouseOver(evt,'red','pink')" onmouseout="onGeneMouseOver(evt,'black','#cf0f78')">
<path id="all" d=" M487 73L423 73L423 63L403 83L423 103L423 93L487 93 L487 73 " style="stroke-linecap: square; stroke-linejoin: miter; fill:#cf0f78; fill-opacity:1.00; stroke:black; stroke-width:1" onmousemove="ShowTooltip(evt, 'FraEuI1c_4753, 1.00, Beta-ketoacyl synthase', 492, 93)" onmouseout="HideTooltip(evt)" />
<path id="all" d=" M257 156L324 156L324 146L344 166L324 186L324 176L257 176 L257 156 " style="stroke-linecap: square; stroke-linejoin: miter; fill:#cf0f78; fill-opacity:1.00; stroke:black; stroke-width:1" onmousemove="ShowTooltip(evt, 'Franean1_2393, 1.00, Beta-ketoacyl synthase', 349, 176)" onmouseout="HideTooltip(evt)" />
</g>
<rect class="tooltip_bg" id="tooltip_bg"
x="0" y="0" rx="4" ry="4"
width="55" height="17" visibility="hidden"/>
<text class="tooltip" id="tooltip"
x="0" y="0" visibility="hidden">Tooltip</text>
</svg>
</body>
</html>