0% ont trouvé ce document utile (0 vote)
44 vues6 pages

Interaction SVG avec couleurs dynamiques

modifcare interactiva culori in svg (html tag)

Transféré par

TiberiuBabet
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats RTF, PDF, TXT ou lisez en ligne sur Scribd
0% ont trouvé ce document utile (0 vote)
44 vues6 pages

Interaction SVG avec couleurs dynamiques

modifcare interactiva culori in svg (html tag)

Transféré par

TiberiuBabet
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats RTF, PDF, TXT ou lisez en ligne sur Scribd

var HV_color; //culoare path in hover

function import_svg(name){

let svg_name = 'SVG_'+name;

let html_str = '<svg name="'+svg_name+'" id="SVGID_00" '+

svg_defs[name].attributes+'>'+svg_defs[name].content+'</svg>';

$('#SVGID_00').replaceWith(html_str);

$('#SVGID_00 path').each(function(){

$(this).click(function(){

console.log(this.style);

alert(colourNameToHex(this.style.fill)); //to do ?

});

$(this).mouseenter(function(){ HV_color = colourNameToHex(this.style.fill).toUpperCase(); });

$(this).mouseleave(function(){ HV_color = false; });

});

$('#DVsvg').on("mousemove", function(){ DV_svgMint_update(); });

};

function DV_svgMint_update(div){

let L = window.event.screenX;
let T = 10 + window.event.screenY - 60;

if (!HV_color) {

$('#DV_svgHint').hide();

} else {

let msg = ''; let BKG_color;

switch(HV_color){

case '#0066CC': case '#6666CC': msg='Esofag'; BKG_color='white'; break;

case '#FFFF00': msg='Glande salivare'; BKG_color='steelblue'; break;

case '#3A2264': msg='Orificiul pilor'; BKG_color='lime'; break;

case '#99CC33': msg='Vezica biliara'; BKG_color='black'; break;

case '#FF4500': msg='Intestinul subtire'; BKG_color='goldenrod'; break;

case '#FFFF99': msg='Pancreas'; BKG_color='royalblue'; break;

case '#996600': msg='Intestinul gros'; BKG_color='rosybrown'; break;

case '#FF9933': msg='Stomac'; BKG_color='navy'; break; case '#990000': msg='Ficat'; BKG_color='ivory'; break;

case '#FFCC66': msg='Corp'; BKG_color='Chocolate'; break; case '#CCF4CC': msg='Cavitate bucala'; BKG_color='midnightblue'; break;

case '#3CB1C3': msg='Laringe'; BKG_color='azure'; break;

};

$('#DV_svgHint').show().css({'position':'absolute', 'top':T+'px', 'left':L+'px', 'color':HV_color, 'background':BKG_color}).html(msg);

};

};
var dictionar_culori = {

"aliceblue": "#f0f8ff", "antiquewhite": "#faebd7", "cyan": "#00ffff", "aquamarine": "#7fffd4", "azure": "#f0ffff",

"beige": "#f5f5dc", "bisque": "#ffe4c4", "black": "#000000", "blanchedalmond": "#ffebcd", "blue": "#0000ff", "blueviolet": "#8a2be2", "brown": "#a52a2a",
"burlywood": "#deb887",

"cadetblue": "#5f9ea0", "chartreuse": "#7fff00", "chocolate": "#d2691e", "coral": "#ff7f50", "cornflowerblue": "#6495ed", "cornsilk": "#fff8dc", "crimson":
"#dc143c", "cyan": "#00ffff",

"darkblue": "#00008b", "darkcyan": "#008b8b", "darkgoldenrod": "#b8860b", "darkgray": "#a9a9a9", "darkgreen": "#006400", "darkkhaki": "#bdb76b",
"darkmagenta": "#8b008b", "darkolivegreen": "#556b2f",

"darkorange": "#ff8c00", "darkorchid": "#9932cc", "darkred": "#8b0000", "darksalmon": "#e9967a", "darkseagreen": "#8fbc8f", "darkslateblue":
"#483d8b", "darkslategray": "#2f4f4f", "darkturquoise": "#00ced1",

"darkviolet": "#9400d3", "deeppink": "#ff1493", "deepskyblue": "#00bfff", "dimgray": "#696969", "dodgerblue": "#1e90ff",

"firebrick": "#b22222", "floralwhite": "#fffaf0", "forestgreen": "#228b22",

"gainsboro": "#dcdcdc", "ghostwhite": "#f8f8ff", "gold": "#ffd700", "goldenrod": "#daa520", "gray": "#e6e6e6cc", "green": "#008000", "greenyellow":
"#adff2f",

"honeydew": "#f0fff0", "hotpink": "#ff69b4",

"indianred ": "#cd5c5c", "indigo": "#4b0082", "ivory": "#fffff0", "khaki": "#f0e68c",

"lavender": "#e6e6fa", "lavenderblush": "#fff0f5", "lawngreen": "#7cfc00", "lemonchiffon": "#fffacd", "lightblue": "#add8e6", "lightcoral": "#f08080",
"lightcyan": "#e0ffff", "lightgoldenrodyellow": "#fafad2",

"lightgrey": "#d3d3d3", "lightgreen": "#90ee90", "lightpink": "#ffb6c1", "lightsalmon": "#ffa07a", "lightseagreen": "#20b2aa", "lightskyblue": "#87cefa",
"lightslategray": "#778899", "lightsteelblue": "#b0c4de",

"lightyellow": "#ffffe0", "lime": "#00ff00", "limegreen": "#32cd32", "linen": "#faf0e6",

"magenta": "#ff00ff", "red": "#800000", "mediumaquamarine": "#66cdaa", "mediumblue": "#0000cd", "mediumorchid": "#ba55d3", "mediumpurple":
"#9370d8", "mediumseagreen": "#3cb371", "mediumslateblue": "#7b68ee",
"mediumspringgreen": "#00fa9a", "mediumturquoise": "#48d1cc", "mediumvioletred": "#c71585", "midnightblue": "#191970", "mintcream": "#f5fffa",
"mistyrose": "#ffe4e1", "moccasin": "#ffe4b5",

"navajowhite": "#ffdead", "navy": "#000080", "lightgray": "#acacac",

"oldlace": "#fdf5e6", "olive": "#808000", "olivedrab": "#6b8e23", "orange": "#ffa500", "orangered": "#ff4500", "orchid": "#da70d6",

"palegoldenrod": "#eee8aa", "palegreen": "#98fb98", "paleturquoise": "#afeeee", "palevioletred": "#d87093", "papayawhip": "#ffefd5", "peachpuff":
"#ffdab9", "peru": "#cd853f", "pink": "#ffc0cb", "plum": "#dda0dd", "powderblue": "#b0e0e6", "purple": "#800080",

"rebeccapurple": "#663399", "red": "#ff0000", "rosybrown": "#bc8f8f", "royalblue": "#4169e1",

"saddlebrown": "#8b4513", "salmon": "#fa8072", "sandybrown": "#f4a460", "seagreen": "#2e8b57", "seashell": "#fff5ee", "sienna": "#a0522d", "silver":
"#c0c0c0", "skyblue": "#87ceeb", "slateblue": "#6a5acd", "slategray": "#708090", "snow": "#fffafa", "springgreen": "#00ff7f", "steelblue": "#4682b4",

"tan": "#d2b48c", "teal": "#008080", "thistle": "#d8bfd8", "tomato": "#ff6347", "turquoise": "#40e0d0",

"violet": "#ee82ee",

"wheat": "#f5deb3", "white": "#ffffff", "whitesmoke": "#f5f5f5",

"yellow": "#ffff00", "yellowgreen": "#9acd32"

function colourNameToHex(colour) {

if (colour.indexOf('rgb(') !== -1) return colourDOCX2Hex(colour);//culoare MS Office ex: rgb(120,45,202)

var colours = { ...dictionar_culori };

if (typeof colours[colour.toLowerCase()] != 'undefined')

return colours[colour.toLowerCase()].toLowerCase();
return false;

};

function HexTocolourName(hex) {

var colours = { ...dictionar_culori };

let keys = Object.keys(colours);

for (var i = 0; i < keys.length; i++) {

key = keys[i];

if (colours[key] == hex) return key;

};

return false;

};

function d2h(d) { let c = (+d).toString(16); if (c.length == 1) c = '0' + c; return c; }; // decimal with padding ex 15->0F

function colourDOCX2Hex(a) {

let arr = a.split('rgb(')[1].split(')')[0].split(',');

let CL = '#' + d2h(arr[0]) + '' + d2h(arr[1]) + '' + d2h(arr[2]);

return CL;
};

if (typeof(loaded_scripts)!=='undefined') loaded_scripts++;

Vous aimerez peut-être aussi