I have a php-file that sends an SVG header and draws itself partly with JavaScript. Everything works fine when I show the SVG directly in the browser. However, when I embed it in an <img>, then the JavaScript seems not to be executed. Maybe I am doing something wrong?
Here is the php-file (testsvg.php):
<?php
header('Content-type: image/svg+xml');
?>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="800"
height="600"
id="example_text">
<g id="layer1">
<text
x="100"
y="100"
id="text_holder">
<?php echo filter_input(INPUT_GET, 'text'); ?>
</text>
</g>
<script type="text/javascript">
function create_from_rect (client_rect, offset_px) {
if (! offset_px) {
offset_px=0;
}
var box = document.createElementNS(
document.rootElement.namespaceURI,
'rect'
);
if (client_rect) {
box.setAttribute('x', client_rect.left - offset_px);
box.setAttribute('y', client_rect.top - offset_px);
box.setAttribute('width', client_rect.width + offset_px * 2);
box.setAttribute('height', client_rect.height + offset_px * 2);
}
return box;
}
function add_bounding_box (text_id, padding) {
var text_elem = document.getElementById(text_id);
if (text_elem) {
var f = text_elem.getClientRects();
if (f) {
var bbox = create_from_rect(f[0], padding);
bbox.setAttribute(
'style',
'fill: none;'+
'stroke: black;'+
'stroke-width: 0.5px;'
);
text_elem.parentNode.appendChild(bbox);
}
}
}
add_bounding_box('text_holder', 10);
</script>
</svg>
(The SVG/JavaScript is mostly taken from How can I draw a box around text with SVG?.)
When I open this file directly in the browser, e.g. with http://localhost/testsvg.php?text=Test it draws a proper box around the text Test.
However, when I embed it with an <img>, e.g. with <img src="testsvg.php?text=Test" alt="">, it does not show the box.
To protect user's privacy, script is not run in images. There are other restrictions.
When thinking of an image it helps to have the mental model "could I do this if I used a raster image"? If you bear that in mind you won't go far wrong as that's basically the model the browsers implement.
Your alternatives are to use <object> or <iframe> tags instead of <img> as they do allow scripting.
Related
I have a shape like this:
Is it possible to grid them using their points and store it in an array?
<polyline class="st8" points="2022.5,409.3 1996.1,409.3 1996.1,296.8 1970.4,296.8 1970.4,324.4 1920.2,324.4 1920.2,429.3
1667.7,429.3 1667.7,360.5 1631.4,360.5 1631.4,408.5 1445,408.5 1445,362.3 1357.4,362.3 1357.4,408.5 962.3,408.5 962.3,362.3
874.8,362.3 874.8,408.5 721.1,408.5 721.1,362.3 633.6,362.3 633.6,408.5 480,408.5 225.4,408.5 225.4,370 168.9,370 168.9,408.6
113.3,408.6 113.3,512.4 110,512.4 170.4,512.4 170.4,564.9 170.4,595.1 170.4,633.5 191.2,633.5 225.2,633.5 225.2,590.2
225.2,500.5 479.9,500.5 589,500.5 589,546.5 721.4,546.5 721.4,500.5 914.4,500.5 914.7,546.5 986.9,546.5 987,500.5
1398.2,500.5 1398.3,546.5 1470.6,546.5 1470.6,500.5 1660.6,500.5 1660.6,544.9 1723,544.9 1723,500.5 1919.1,500.5 1919.1,511.3
2022.5,511.3 2022.5,409.3 "/>
Edit: Is it possible to use Pathfinding.js to the grid and how will I set the setWalkableAt function in the library?
Inspired by the mention of the SVG DOM in How do I add coordinates to an SVG polyline?, I came up with...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function() {
var polyline= document.getElementById("myPolyline");
var pts = [];
for (var i=0; i < polyline.points.length; i++) {
pts.push([polyline.points[i].x, polyline.points[i].y]);
}
console.log(pts);
}
</script>
</head>
<body>
<svg width="1920" height="340">
<polyline id="myPolyline" class="st8" points="2022.5,409.3 1996.1,409.3 1996.1,296.8 1970.4,296.8 1970.4,324.4 1920.2,324.4 1920.2,429.3
1667.7,429.3 1667.7,360.5 1631.4,360.5 1631.4,408.5 1445,408.5 1445,362.3 1357.4,362.3 1357.4,408.5 962.3,408.5 962.3,362.3
874.8,362.3 874.8,408.5 721.1,408.5 721.1,362.3 633.6,362.3 633.6,408.5 480,408.5 225.4,408.5 225.4,370 168.9,370 168.9,408.6
113.3,408.6 113.3,512.4 110,512.4 170.4,512.4 170.4,564.9 170.4,595.1 170.4,633.5 191.2,633.5 225.2,633.5 225.2,590.2
225.2,500.5 479.9,500.5 589,500.5 589,546.5 721.4,546.5 721.4,500.5 914.4,500.5 914.7,546.5 986.9,546.5 987,500.5
1398.2,500.5 1398.3,546.5 1470.6,546.5 1470.6,500.5 1660.6,500.5 1660.6,544.9 1723,544.9 1723,500.5 1919.1,500.5 1919.1,511.3
2022.5,511.3 2022.5,409.3 "/>
</svg>
</body>
</html>
Note that I gave the polyline an id attribute to make it easy to get a reference to it with document.getElementById().
Look in the console of your browser's developer tools to see the array of arrays.
I finished my personal website today (yey), but of course it doesn't work in IE. I wouldn't bother, if it wouldn't be for employers so my question is the following.
When I try to open the Yes I Code page the IE gives me an error message saying
SVG4601: SVG Path data has incorrect format and could not be completely parsed.
After googeling a bit, I found a few ideas that might help, but I am not generating the svg dynamically. The SVG is a data url generated via webpack from a file.
This is one of the many SVG files https://pastebin.com/En4YQwzC
This is the code that loads it via require
{
name: 'SQLite',
logo: require('../src/assets/logos/database/sqlite-seeklogo.com.svg'),
parent: [
'Database'
]
},
And this is the Vue.js component that renders the svg:
<template>
<div class="ulbricht-yes-i-code">
<div class="ulbricht-yes-i-code__framework-item" v-for="framework in frameworks" :key="framework.name">
<img class="ulbricht-yes-i-code__framework-logo" :src="dataUrl(framework.logo)" :alt="framework.name"/>
</div>
</div>
</template>
<script>
import YesICode from 'the file with all svg images';
export default {
name: "YesICode",
computed: {
yesICode() {
return YesICode;
},
frameworks() {
return YesICode.frameworks.filter(item => item.parent.includes(this.selectedGroup));
}
},
methods: {
dataUrl(input) {
return `data:image/svg+xml;charset=utf8,${encodeURIComponent(input.replace(/"/g, '\''))}`;
}
},
data() {
return {
selectedGroup: ''
}
}
}
</script>
The SVG gets injected into the DOM but is not displayed at all. Here is the rendered img tag
<img class="ulbricht-yes-i-code__framework-logo" alt="SQLite" src="data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D'0%200%20512%20228'%20version%3D'1.1'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20preserveAspectRatio%3D'xMidYMid'%3E%3Cdefs%3E%3ClinearGradient%20x1%3D'57.6615627%25'%20y1%3D'2.04644676%25'%20x2%3D'57.6615584%25'%20y2%3D'94.4387516%25'%20id%3D'linearGradient-1'%3E%3Cstop%20stop-color%3D'%2397D9F6'%20offset%3D'0%25'%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D'%230F80CC'%20offset%3D'92.024499%25'%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D'%230F80CC'%20offset%3D'100%25'%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%3E%3Cpath%20d%3D'M194.519337%2C112.044206%20C187.698564%2C112.044206%20182.152486%2C114.063211%20177.900552%2C118.099455%20C173.648619%2C122.139234%20171.491713%2C127.434452%20171.491713%2C133.922666%20C171.491713%2C137.285148%20172.027403%2C140.350953%20173.082873%2C143.160235%20C174.138343%2C145.975174%20175.780773%2C148.582909%20177.98895%2C150.939241%20C180.197127%2C153.297694%20184.617017%2C156.501413%20191.20442%2C160.5746%20C199.287514%2C165.509134%20204.577238%2C169.513908%20207.116022%2C172.640884%20C209.656575%2C175.765215%20210.917127%2C179.03947%20210.917127%2C182.453039%20C210.917127%2C187.023558%20209.412597%2C190.671912%20206.320442%2C193.414365%20C203.222983%2C196.158062%20199.080663%2C197.524862%20193.944751%2C197.524862%20C188.527735%2C197.524862%20183.809061%2C195.6153%20179.756906%2C191.823204%20C175.704751%2C188.025635%20173.659227%2C183.002703%20173.61326%2C176.707182%20L171.093923%2C176.707182%20L171.093923%2C199.558011%20L173.61326%2C199.558011%20C174.38232%2C197.394203%20175.44663%2C196.287293%20176.839779%2C196.287293%20C177.509834%2C196.287293%20179.079779%2C196.749436%20181.524862%2C197.61326%20C187.474033%2C199.730026%20192.358895%2C200.751381%20196.198895%2C200.751381%20C202.816354%2C200.751381%20208.464972%2C198.433775%20213.171271%2C193.723757%20C217.870497%2C189.015874%20220.243094%2C183.337017%20220.243094%2C176.707182%20C220.243094%2C171.56632%20218.676685%2C166.992435%20215.60221%2C163.005539%20C212.527735%2C159.013848%20206.548508%2C154.370829%20197.61326%2C149.038688%20C189.92442%2C144.419175%20184.933481%2C140.65681%20182.629834%2C137.723771%20C180.322652%2C134.794961%20179.138122%2C131.555204%20179.138122%2C128.000014%20C179.138122%2C124.154703%20180.550718%2C121.066084%20183.337017%2C118.762438%20C186.123315%2C116.457024%20189.774144%2C115.314924%20194.342541%2C115.314924%20C199.483757%2C115.314924%20203.769282%2C116.84067%20207.160221%2C119.911609%20C210.547624%2C122.987852%20212.506519%2C127.250747%20213.082873%2C132.729296%20L215.60221%2C132.729296%20L215.60221%2C112.928184%20L213.259669%2C112.928184%20C212.97326%2C113.937687%20212.708066%2C114.58299%20212.464088%2C114.872935%20C212.227182%2C115.161112%20211.77105%2C115.314924%20211.093923%2C115.314924%20C210.278895%2C115.314924%20208.825635%2C114.971941%20206.762431%2C114.29835%20C202.342541%2C112.809731%20198.267403%2C112.044206%20194.519337%2C112.044206%20L194.519337%2C112.044206%20Z%20M276.861878%2C112.044206%20C268.550718%2C112.044206%20261.005083%2C114.003101%20254.187845%2C117.922659%20C247.36%2C121.835145%20241.955359%2C127.268073%20237.966851%2C134.187859%20C233.98011%2C141.107101%20232%2C148.455772%20232%2C156.287307%20C232%2C166.808751%20235.443978%2C176.182269%20242.38674%2C184.39779%20C249.333039%2C192.608361%20257.656575%2C197.724471%20267.314917%2C199.690608%20C269.523094%2C200.841193%20272.682431%2C203.811359%20276.81768%2C208.618785%20C281.478011%2C214.044103%20285.420552%2C217.957127%20288.662983%2C220.287293%20C291.901878%2C222.618689%20295.398895%2C224.327425%20299.093923%2C225.458564%20C302.792486%2C226.584935%20306.791602%2C227.138122%20311.116022%2C227.138122%20C316.352707%2C227.138122%20321.041326%2C226.227978%20325.171271%2C224.353591%20L324.243094%2C222.055249%20C321.845746%2C222.919963%20319.289282%2C223.337017%20316.596685%2C223.337017%20C312.94232%2C223.337017%20309.249061%2C222.131978%20305.546961%2C219.712707%20C301.850166%2C217.287425%20297.226961%2C212.660162%20291.712707%2C205.834254%20C289.120884%2C202.563536%20287.331713%2C200.499978%20286.320442%2C199.690608%20C296.887514%2C197.62705%20305.577017%2C192.505635%20312.353591%2C184.309392%20C319.128398%2C176.116685%20322.519337%2C166.766518%20322.519337%2C156.287307%20C322.519337%2C143.84459%20318.092376%2C133.387499%20309.303867%2C124.861886%20C300.508287%2C116.335388%20289.691934%2C112.044206%20276.861878%2C112.044206%20L276.861878%2C112.044206%20Z%20M328.265193%2C112.044206%20L328.397719%2C114.740339%20C333.931421%2C114.740339%20337.030648%2C116.370394%20337.723686%2C119.646416%20C337.981808%2C120.818571%20338.100261%2C122.982902%20338.121476%2C126.099455%20L338.077348%2C185.723757%20C338.031381%2C190.176884%20337.396685%2C193.02011%20336.176796%2C194.254144%20C334.955138%2C195.479337%20332.890166%2C196.24663%20329.900552%2C196.552486%20L329.768027%2C199.248619%20L384.928248%2C199.248619%20L386.342612%2C185.723757%20L383.823275%2C185.723757%20C383.103717%2C189.408177%20381.454214%2C192.047565%20378.8288%2C193.546961%20C376.196314%2C195.057319%20371.541286%2C195.801105%20364.81775%2C195.801105%20L359.602281%2C195.801105%20C353.552336%2C195.801105%20350.051783%2C193.61396%20349.127143%2C189.21547%20C348.936203%2C188.345282%20348.870789%2C187.412324%20348.861949%2C186.38674%20L349.082944%2C126.099455%20C349.081529%2C121.653399%20349.643386%2C118.67404%20350.806701%2C117.215477%20C351.982391%2C115.762217%20354.10217%2C114.948957%20357.171341%2C114.740339%20L357.038815%2C112.044206%20L328.265335%2C112.044206%20L328.265193%2C112.044206%20Z%20M277.745856%2C115.314924%20C287.119558%2C115.314924%20294.773039%2C119.00677%20300.685083%2C126.453046%20C306.595359%2C133.901988%20309.524862%2C144.111211%20309.524862%2C157.038688%20C309.524862%2C169.288656%20306.552928%2C179.097289%20300.596685%2C186.475138%20C294.640442%2C193.850696%20286.712928%2C197.524862%20276.861878%2C197.524862%20C267.398011%2C197.524862%20259.723315%2C193.736133%20253.834254%2C186.121547%20C247.950497%2C178.506961%20245.038674%2C168.620906%20245.038674%2C156.464103%20C245.038674%2C143.971727%20247.985856%2C133.971631%20253.922652%2C126.497245%20C259.855912%2C119.030814%20267.801105%2C115.314924%20277.745856%2C115.314924%20L277.745856%2C115.314924%20Z%20M404.596685%2C128.132611%20C403.251271%2C128.132611%20402.225856%2C128.586975%20401.458564%2C129.502777%20C400.673591%2C130.415028%20400.433149%2C131.52%20400.707182%2C132.861893%20C400.972376%2C134.163631%20401.706077%2C135.3045%20402.872928%2C136.265208%20C404.032707%2C137.22501%20405.28442%2C137.723771%20406.629834%2C137.723771%20C407.93105%2C137.723771%20408.922873%2C137.225038%20409.635359%2C136.265208%20C410.347845%2C135.3045%20410.565304%2C134.163631%20410.298343%2C132.861893%20C410.024309%2C131.52%20409.315359%2C130.415028%20408.220994%2C129.502777%20C407.114254%2C128.586975%20405.897901%2C128.132611%20404.596685%2C128.132611%20L404.596685%2C128.132611%20Z%20M440.972376%2C137.281782%20C438.686409%2C146.075934%20433.730829%2C150.834917%20426.121547%2C151.602224%20L426.209945%2C154.121561%20L435.093923%2C154.121561%20L434.917127%2C183.911602%20C434.931271%2C189.004729%20435.086851%2C192.395669%20435.447514%2C194.121547%20C436.322652%2C198.253444%20439.020552%2C200.353591%20443.535912%2C200.353591%20C450.068508%2C200.353591%20456.921105%2C196.374276%20464.088398%2C188.41989%20L461.922652%2C186.563536%20C456.747845%2C191.801819%20452.172376%2C194.430939%20448.176796%2C194.430939%20C445.721105%2C194.430939%20444.198895%2C193.018696%20443.624309%2C190.232044%20C443.466961%2C189.555271%20443.403315%2C188.764471%20443.403315%2C187.845304%20L443.491713%2C154.121561%20L457.060773%2C154.121561%20L456.928248%2C150.099462%20L443.535982%2C150.099462%20L443.535982%2C137.281782%20L440.972446%2C137.281782%20L440.972376%2C137.281782%20Z%20M493.436464%2C148.508301%20C485.84663%2C148.508301%20479.672928%2C152.192721%20474.872928%2C159.513826%20C470.09768%2C166.847307%20468.619669%2C174.97228%20470.497238%2C183.911602%20C471.60221%2C189.14775%20473.803315%2C193.20593%20477.171271%2C196.066298%20C480.533923%2C198.925436%20484.8%2C200.353591%20489.900552%2C200.353591%20C494.649282%2C200.353591%20501.261436%2C199.151211%20504.044199%2C196.729282%20C506.834033%2C194.308766%20509.404641%2C190.38744%20511.779006%2C185.016575%20L509.878453%2C183.027624%20C506.091492%2C189.995138%20498.448619%2C193.502762%20492.685083%2C193.502762%20C484.761105%2C193.502762%20479.908066%2C189.155359%20478.099448%2C180.508287%20C477.864309%2C179.404545%20477.689282%2C178.218785%20477.569061%2C176.972376%20C486.995801%2C175.479867%20494.14011%2C172.836943%20498.961326%2C169.016575%20C503.779006%2C165.194099%20508.616133%2C161.142283%20507.712707%2C156.861893%20C507.175249%2C154.318328%20505.854586%2C152.318416%20503.823204%2C150.806644%20C501.765304%2C149.295579%20496.422541%2C148.508301%20493.436464%2C148.508301%20L493.436464%2C148.508301%20Z%20M410.475138%2C148.817694%20L394.121547%2C152.5746%20L394.121547%2C155.491727%20L399.779006%2C154.784545%20C402.519337%2C154.784545%20404.131713%2C156.02548%20404.640884%2C158.497252%20C404.812376%2C159.324485%20404.920221%2C160.486202%20404.950276%2C161.944766%20L404.773481%2C188.685083%20C404.727514%2C192.385414%20404.317348%2C194.536479%20403.491713%2C195.18232%20C402.659006%2C195.829392%20400.463204%2C196.154696%20396.906077%2C196.154696%20L396.81768%2C198.674033%20L422.762431%2C198.674033%20L422.718303%2C196.154696%20C419.113441%2C196.154696%20416.776203%2C195.870239%20415.734877%2C195.314917%20C414.711231%2C194.763145%20414.005817%2C193.758946%20413.701728%2C192.220994%20C413.46659%2C191.112656%20413.364049%2C189.202924%20413.348137%2C186.563536%20L413.436535%2C148.817694%20L410.475209%2C148.817694%20L410.475138%2C148.817694%20Z%20M489.281768%2C153.76797%20C490.860552%2C153.76797%20492.386298%2C154.377731%20493.922652%2C155.580125%20C495.43779%2C156.778275%20496.360663%2C158.110593%20496.662983%2C159.558025%20C498.142762%2C166.667159%20491.84%2C171.582048%20477.657459%2C174.320442%20C477.252597%2C169.136626%20478.150718%2C164.430865%20480.441989%2C160.17681%20C482.71558%2C155.926814%20485.676906%2C153.76797%20489.281768%2C153.76797%20L489.281768%2C153.76797%20Z'%20fill%3D'%23003B57'%3E%3C%2Fpath%3E%3Cpath%20d%3D'M157.887646%2C9.95179492%20L17.1498785%2C9.95179492%20C7.71748066%2C9.95179492%201.42108547e-14%2C17.6706899%201.42108547e-14%2C27.1027341%20L1.42108547e-14%2C182.31016%20C1.42108547e-14%2C191.741666%207.71748066%2C199.459331%2017.1498785%2C199.459331%20L109.843448%2C199.459331%20C108.79135%2C153.338017%20124.54117%2C63.8308448%20157.887646%2C9.95179492%20L157.887646%2C9.95179492%20Z'%20fill%3D'%230F80CC'%3E%3C%2Fpath%3E%3Cpath%20d%3D'M152.774718%2C14.9551098%20L17.1498785%2C14.9551098%20C10.4523315%2C14.9551098%205.00207735%2C20.4039496%205.00207735%2C27.1027341%20L5.00207735%2C170.986233%20C35.7181878%2C159.197504%2081.8193467%2C149.025535%20113.695413%2C149.487509%20C120.100971%2C115.994079%20138.926844%2C50.3540911%20152.774718%2C14.9551098%20L152.774718%2C14.9551098%20Z'%20fill%3D'url(%23linearGradient-1)'%3E%3C%2Fpath%3E%3Cpath%20d%3D'M190.71505%2C4.8724579%20C181.076155%2C-3.7233432%20169.405878%2C-0.270525525%20157.887646%2C9.95179492%20C156.178033%2C11.470469%20154.471956%2C13.1553308%20152.774718%2C14.9551098%20C133.070851%2C35.8576513%20114.781348%2C74.5758833%20109.099138%2C104.144944%20C111.312619%2C108.633784%20113.04168%2C114.361961%20114.180243%2C118.737651%20C114.471956%2C119.860303%20114.735381%2C120.914005%20114.945768%2C121.810358%20C115.446099%2C123.931729%20115.714829%2C125.307375%20115.714829%2C125.307375%20C115.714829%2C125.307375%20115.538033%2C124.638911%20114.813171%2C122.536988%20C114.675271%2C122.133894%20114.521459%2C121.693673%20114.339359%2C121.175662%20C114.261569%2C120.96174%20114.153724%2C120.70185%20114.035271%2C120.424281%20C112.749967%2C117.436436%20109.194608%2C111.130137%20107.629967%2C108.384502%20C106.291624%2C112.332347%20105.108862%2C116.025607%20104.118807%2C119.367044%20C108.635934%2C127.631883%20111.388641%2C141.795684%20111.388641%2C141.795684%20C111.388641%2C141.795684%20111.149967%2C140.877762%20110.014939%2C137.674056%20C109.007204%2C134.840546%20103.987978%2C126.046381%20102.799028%2C123.990425%20C100.765171%2C131.498587%2099.9570387%2C136.567669%20100.68579%2C137.801872%20C102.100685%2C140.193393%20103.448221%2C144.319802%20104.631514%2C148.88325%20C107.304663%2C159.163729%20109.162785%2C171.678918%20109.162785%2C171.678918%20C109.162785%2C171.678918%20109.222895%2C172.508259%20109.323669%2C173.784553%20C108.952398%2C182.417835%20109.17516%2C191.368811%20109.843448%2C199.459331%20C110.729193%2C210.169253%20112.396376%2C219.369526%20114.521459%2C224.293452%20L115.96411%2C223.506896%20C112.843669%2C213.805939%20111.576044%2C201.092568%20112.131182%2C186.430911%20C112.970961%2C164.020133%20118.128088%2C136.993747%20127.65737%2C108.824723%20C143.756376%2C66.3018502%20166.092729%2C32.1838391%20186.535602%2C15.8903585%20C167.903116%2C32.7177618%20142.684994%2C87.186712%20135.135823%2C107.35732%20C126.683227%2C129.944723%20120.693392%2C151.140929%20117.083227%2C171.4489%20C123.311735%2C152.410321%20143.450519%2C144.226624%20143.450519%2C144.226624%20C143.450519%2C144.226624%20153.328088%2C132.044885%20164.871072%2C114.641298%20C157.956597%2C116.218314%20146.602785%2C118.917983%20142.799912%2C120.516215%20C137.190188%2C122.869364%20135.678586%2C123.672016%20135.678586%2C123.672016%20C135.678586%2C123.672016%20153.849635%2C112.606381%20169.43947%2C107.595994%20C190.87947%2C73.828038%20214.237702%2C25.8563253%20190.71505%2C4.8724579'%20fill%3D'%23003B57'%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E">
I currently have no Windows environment for debugging, so it is a bit hard to tackle it down. My current environment is an Azure VM. You can check out the site here: https://imanuel.ulbricht.codes/yesicode
Any help is appreciated, maybe there is even a better way to generate the DataURLs. Loading the files via HTTP doesn't solve the problem.
Update
After removing all images except the Java logo I still get the error. The SVG of the Java logo is as follows:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 256 346" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="M82.5539491,267.472524 C82.5539491,267.472524 69.35552,275.147869 91.9468218,277.745105 C119.315549,280.867375 133.303389,280.419607 163.463913,274.711273 C163.463913,274.711273 171.393396,279.683258 182.467491,283.989644 C114.855564,312.966982 29.4483782,282.311215 82.5539491,267.472524"
fill="#5382A1"/>
<path d="M74.2921309,229.658996 C74.2921309,229.658996 59.4888145,240.616727 82.0968727,242.955171 C111.333004,245.971316 134.421411,246.218007 174.373236,238.524975 C174.373236,238.524975 179.899113,244.127185 188.588218,247.190807 C106.841367,271.094691 15.79008,249.075898 74.2921309,229.658996"
fill="#5382A1"/>
<path d="M143.941818,165.514705 C160.601367,184.695156 139.564684,201.955142 139.564684,201.955142 C139.564684,201.955142 181.866124,180.117876 162.438982,152.772422 C144.294633,127.271098 130.380335,114.600495 205.706705,70.9138618 C205.706705,70.9138618 87.4691491,100.44416 143.941818,165.514705"
fill="#E76F00"/>
<path d="M233.364015,295.441687 C233.364015,295.441687 243.131113,303.489396 222.60736,309.715316 C183.580858,321.537862 60.1748945,325.107898 25.8932364,310.186356 C13.5698618,304.825251 36.67968,297.385425 43.9491491,295.824291 C51.5304727,294.180305 55.8629236,294.486575 55.8629236,294.486575 C42.15808,284.832116 -32.7195927,313.443607 17.8287709,321.637469 C155.681513,343.993251 269.121164,311.570618 233.364015,295.441687"
fill="#5382A1"/>
<path d="M88.9008873,190.479825 C88.9008873,190.479825 26.1287564,205.389265 66.6717091,210.803433 C83.7901964,213.095331 117.915462,212.576815 149.702284,209.913484 C175.680233,207.722124 201.765236,203.062924 201.765236,203.062924 C201.765236,203.062924 192.605091,206.985775 185.977949,211.510924 C122.233949,228.275665 -0.907636364,220.476509 34.5432436,203.328233 C64.5241018,188.83584 88.9008873,190.479825 88.9008873,190.479825"
fill="#5382A1"/>
<path d="M201.506444,r253.422313 C266.305164,219.7504 236.344785,187.392 215.432844,191.751447 C210.307258,192.818269 208.021876,193.742662 208.021876,193.742662 C208.021876,193.742662 209.924655,190.761891 213.558924,189.471651 C254.929455,174.927127 286.746065,232.368873 200.204102,255.11936 C200.204102,255.120291 201.206691,254.223825 201.506444,253.422313"
fill="#5382A1"/>
<path d="M162.438982,0.371432727 C162.438982,0.371432727 198.325527,36.27008 128.402153,91.4720582 C72.3307055,135.753542 115.616116,161.001658 128.37888,189.848669 C95.6490473,160.318371 71.6297309,134.322735 87.7437673,110.128407 C111.395375,74.6132945 176.918342,57.3942691 162.438982,0.371432727"
fill="#E76F00"/>
<path d="M95.2683055,344.665367 C157.466996,348.646865 252.980131,342.45632 255.24224,313.025629 C255.24224,313.025629 250.893964,324.182575 203.838371,333.042967 C150.750487,343.033484 85.2740655,341.867055 46.4393309,335.464262 C46.4402618,335.463331 54.3892945,342.043927 95.2683055,344.665367"
fill="#5382A1"/>
</g>
</svg>
My current idea is, to detect the IE via UA and then displaying PNGs instead of SVG files. But I am unsure if that is really the only solution.
I'm very new to programming and coding. I'm using a .svg file generated by Adobe Illustrator to make an interactive map with d3.js.
This SVG is organized with g's with polygon's inside which have their own id's. I also added custom data do each polygon in the SVG (data-price="number"):
<g id="price-range">
<polygon id="name" data-price="price number" points="..."/>
<polygon id="name2" data-price="price2 number" points="..."/>
// and so on
</g>
I would like to use those custom data attributes as data to generate different style outputs for each of these polygon's. This is my code so far (it's not working):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="d3/d3.js"></script>
<style type="text/css">
#map-block {
width: 100%;
max-width: 1000px;
align-content: center;
margin: auto; }
</style>
</head>
<body>
<div id="map-block">
<svg id="mapa-usados-sp" width="100%"></svg>
</div>
<script>
var svg = null;
var mapa = null;
d3.xml("sp.svg", function(error, xml) {
if (error) throw error;
var domSVG = document.getElementById('mapa-usados-sp');
domSVG.appendChild(xml.documentElement.getElementById('mapa'));
svg = d3.select(domSVG);
mapa = svg.select('#mapa');
var xmlSVG = d3.select(xml.getElementsByTagName('svg')[0]);
svg.attr('viewBox', xmlSVG.attr('viewBox'));
var bg = mapa.selectAll("g#contexto");
bg.style("fill", "#e9e9e9");
var shapes = mapa.select("g#zones").selectAll("polygon");
var price = shapes.(xml.documentElement.getAttribute('data-
price'));
shapes.style("fill", function(price) {
if (price = 0) { return "#323232";}
if (price <= 1700 && price > 0 ) {return "#2169dd";}
if (price > 1700 && d <= 2500) {return "#6921dd";}
});
});
</script>
</body>
</html>
I chose not to style each shape refering to it's id or class because I would really like to use the custom-data attributes in the .svg file to generate visual outputs.
In the end this will be a very dynamic piece. I'm going to add interactions and event listeners, so this is why I'm very interested in finding out how to extract data from .svg attributes and use it to style the shapes that contain these attributes.
I hope I have made my point corretly.
The way to get the "data" attribute of each polygon is using dataset:
The HTMLElement.dataset property allows access, both in reading and writing mode, to all the custom data attributes (data-*) set on the element, either in HTML or in the DOM.
In your case, where this is the current DOM element:
this.dataset.price
Pay attention that this will return a string, you may want to coerce it to a number.
Here is the demo, using the value of data-price to fill the polygons:
var svg = d3.select("svg");
var shapes = svg.selectAll("polygon");
shapes.each(function() {
var thisPrice = +this.dataset.price;
d3.select(this).attr("fill", thisPrice === 0 ? "#323232" :
thisPrice > 1700 ? "#6921dd" : "#2169dd")
})
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
<polygon id="name1" data-price="0" points="30,10 10,50 50,50" />
<polygon id="name2" data-price="1000" points="80,10 60,50 100,50" />
<polygon id="name3" data-price="2000" points="130,10 110,50 150,50" />
</svg>
PS: It's not clear what's the colour if the value is above 2500.
I'm just curious - is it possible to send by SVG image code in the following way?
<original div with inline SVG> -> Input field -> <final DIV>
I want to use following code:
Copy-1
<div id="source-1">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" height="100" width="100"
style="stroke:#ff0000; fill: #0000ff"/>
</svg>
</div>
<input name="dynamichidden-637" value="" id="pole" />
<br />
Copy-2
<div id="source-2"></div>
and Jquery:
jQuery( document ).ready(function( $ ) {
$('#copy-1').click(function() {
var value = $('#source-1').html();
var input = $('#pole');
input.val('')
input.val(input.val() + value);
return false;
});
$('#copy-2').click(function() {
$('#pole').appendTo('#source-2');
return false;
});
});
So my question is - is it possible to achieve it in that way? or using somehow other solution which will allow me to transfer svg code from one page to another without storing the data in Database? This is JSfiddle:
http://jsfiddle.net/v2br8/16/
You just need to create the copy using the value of the input:
var value = $('#pole').val();
var copy = $(value);
copy.appendTo('#source-2');
or simply:
$($('#pole').val()).appendTo('#source-2');
DEMO
Try: source-2.innerHTML=source_1.innerHTML
I am trying to add current time to an SVG file using ECMAScript.
Following is the code I have. Unfortunately it's not working. How do I fix it?
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
<text x="0" y="15" fill="red">It is now
<script type="text/javascript">
<![CDATA[
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
document.write(month + "/" + day + "/" + year);
]]>
</script>
</text>
</svg>
Demo: http://jsfiddle.net/M8YXS/
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
<text x="0" y="15" fill="red">It is now <tspan id="now">(time)</tspan></text>
<!--
This script block must either be after the element in the source code
or else the code below must be wrapped in a callback that is invoked
only after the DOM is created (e.g. window.onload in a browser)
-->
<script>
// Create whatever string you want
var dateString = (new Date).toDateString();
// Set the string content of the Text Node child of the <tspan>
document.getElementById('now').firstChild.nodeValue = dateString;
</script>
</svg>