Skip to content

GitLab

Commit 136c45e4 authored by Sylvain Coulange's avatar Sylvain Coulange
Browse files

proto écriture couleurs mandarin

parent c568b252
Hide whitespace changes
Inline Side-by-side
static/svg/prototype_mandarin_ecritureEnCouleurs.html 0 → 100644
View file @ 136c45e4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mandarin en couleurs</title>
<link rel="stylesheet" type="text/css" href="../styles/phonochromie_alem_v3.css">
<style>
body {
background-color: black;
padding: 100px 0px;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<defs>
<linearGradient id="gradient_ts" x1="0" x2="1" y1="0" y2="0">
<stop offset="50%" class="phon_t"/>
<stop offset="51%" class="phon_s"/>
</linearGradient>
<linearGradient id="gradient_t_hs" x1="0" x2="1" y1="0" y2="0">
<stop offset="50%" class="phon_t_h"/>
<stop offset="51%" class="phon_s"/>
</linearGradient>
<linearGradient id="gradient_ts_slash" x1="0" x2="1" y1="0" y2="0">
<stop offset="50%" class="phon_t"/>
<stop offset="51%" class="phon_s_slash"/>
</linearGradient>
<linearGradient id="gradient_t_hs_slash" x1="0" x2="1" y1="0" y2="0">
<stop offset="50%" class="phon_t_h"/>
<stop offset="51%" class="phon_s_slash"/>
</linearGradient>
<linearGradient id="gradient_ts_retr" x1="0" x2="1" y1="0" y2="0">
<stop offset="50%" class="phon_t"/>
<stop offset="51%" class="phon_s_retr"/>
</linearGradient>
<linearGradient id="gradient_t_hs_retr" x1="0" x2="1" y1="0" y2="0">
<stop offset="50%" class="phon_t_h"/>
<stop offset="51%" class="phon_s_retr"/>
</linearGradient>
<pattern id="zai" patternUnits="userSpaceOnUse" width="100" height="100">
<rect stroke="black" stroke-width="0.5" width="100px" height="33px" x="0" y="0" class="phon_t_hs" />
<rect stroke="black" stroke-width="0.5" width="100px" height="33px" x="0" y="33" class="phon_a" />
<rect stroke="black" stroke-width="0.5" width="100px" height="33px" x="0" y="66" class="phon_j" />
</pattern>
</defs>
<style>
.phon_t_hs_retr {
fill:url(#gradient_t_hs_retr);
}
.phon_ts_retr {
fill:url(#gradient_ts_retr);
}
.phon_t_hs {
fill:url(#gradient_t_hs);
}
.phon_ts {
fill:url(#gradient_ts);
}
.phon_t_hs_slash {
fill:url(#gradient_t_hs_slash);
}
.phon_ts_slash {
fill:url(#gradient_ts_slash);
}
.sinosvg {
margin: 0px 5px;
}
</style>
</svg>
<div id="output"></div>
<script>
function create(sin,sy,phonList) {
// create the svg element
const svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
// set width and height
svg1.setAttribute("class","sinosvg");
svg1.setAttribute("width", "100");
svg1.setAttribute("height", "100");
//
if (sy == 1) {
const rect1 = document. createElementNS("http://www.w3.org/2000/svg", "rect");
rect1.setAttribute("x", "0");
rect1.setAttribute("y", "0");
rect1.setAttribute("height", "100");
rect1.setAttribute("width", "100");
rect1.setAttribute("stroke","black");
rect1.setAttribute("stroke-width","0.5");
rect1.setAttribute("class", phonList[0]);
const txt = document.createElementNS("http://www.w3.org/2000/svg", "text");
txt.setAttribute("x","0");
txt.setAttribute("y","90");
txt.setAttribute("font-family","AR PL UKai TW");
txt.setAttribute("font-size","100");
txt.innerHTML = sin;
// attach it to the container
svg1.appendChild(rect1);
svg1.appendChild(txt);
} else if (sy == 2) {
const rect1 = document. createElementNS("http://www.w3.org/2000/svg", "rect");
rect1.setAttribute("x", "0");
rect1.setAttribute("y", "0");
rect1.setAttribute("height", "50");
rect1.setAttribute("width", "100");
rect1.setAttribute("stroke","black");
rect1.setAttribute("stroke-width","0.5");
rect1.setAttribute("class", phonList[0]);
const rect2 = document. createElementNS("http://www.w3.org/2000/svg", "rect");
rect2.setAttribute("x", "0");
rect2.setAttribute("y", "50");
rect2.setAttribute("height", "50");
rect2.setAttribute("width", "100");
rect2.setAttribute("stroke","black");
rect2.setAttribute("stroke-width","0.5");
rect2.setAttribute("class", phonList[1]);
const txt = document.createElementNS("http://www.w3.org/2000/svg", "text");
txt.setAttribute("x","0");
txt.setAttribute("y","90");
txt.setAttribute("font-family","AR PL UKai TW");
txt.setAttribute("font-size","100");
txt.innerHTML = sin;
// attach it to the container
svg1.appendChild(rect1);
svg1.appendChild(rect2);
svg1.appendChild(txt);
} else if (sy == 3) {
const rect1 = document. createElementNS("http://www.w3.org/2000/svg", "rect");
rect1.setAttribute("x", "0");
rect1.setAttribute("y", "0");
rect1.setAttribute("height", "33");
rect1.setAttribute("width", "100");
rect1.setAttribute("stroke","black");
rect1.setAttribute("stroke-width","0.5");
rect1.setAttribute("class", phonList[0]);
const rect2 = document. createElementNS("http://www.w3.org/2000/svg", "rect");
rect2.setAttribute("x", "0");
rect2.setAttribute("y", "33");
rect2.setAttribute("height", "33");
rect2.setAttribute("width", "100");
rect2.setAttribute("stroke","black");
rect2.setAttribute("stroke-width","0.5");
rect2.setAttribute("class", phonList[1]);
const rect3 = document. createElementNS("http://www.w3.org/2000/svg", "rect");
rect3.setAttribute("x", "0");
rect3.setAttribute("y", "66");
rect3.setAttribute("height", "33");
rect3.setAttribute("width", "100");
rect3.setAttribute("stroke","black");
rect3.setAttribute("stroke-width","0.5");
rect3.setAttribute("class", phonList[2]);
const txt = document.createElementNS("http://www.w3.org/2000/svg", "text");
txt.setAttribute("x","0");
txt.setAttribute("y","90");
txt.setAttribute("font-family","AR PL UKai TW");
txt.setAttribute("font-size","100");
txt.innerHTML = sin;
// attach it to the container
svg1.appendChild(rect1);
svg1.appendChild(rect2);
svg1.appendChild(rect3);
svg1.appendChild(txt);
} else if (sy == 4) {
const rect1 = document. createElementNS("http://www.w3.org/2000/svg", "rect");
rect1.setAttribute("x", "0");
rect1.setAttribute("y", "0");
rect1.setAttribute("height", "25");
rect1.setAttribute("width", "100");
rect1.setAttribute("stroke","black");
rect1.setAttribute("stroke-width","0.5");
rect1.setAttribute("class", phonList[0]);
const rect2 = document. createElementNS("http://www.w3.org/2000/svg", "rect");
rect2.setAttribute("x", "0");
rect2.setAttribute("y", "25");
rect2.setAttribute("height", "25");
rect2.setAttribute("width", "100");
rect2.setAttribute("stroke","black");
rect2.setAttribute("stroke-width","0.5");
rect2.setAttribute("class", phonList[1]);
const rect3 = document. createElementNS("http://www.w3.org/2000/svg", "rect");
rect3.setAttribute("x", "0");
rect3.setAttribute("y", "50");
rect3.setAttribute("height", "25");
rect3.setAttribute("width", "100");
rect3.setAttribute("stroke","black");
rect3.setAttribute("stroke-width","0.5");
rect3.setAttribute("class", phonList[2]);
const rect4 = document. createElementNS("http://www.w3.org/2000/svg", "rect");
rect4.setAttribute("x", "0");
rect4.setAttribute("y", "75");
rect4.setAttribute("height", "25");
rect4.setAttribute("width", "100");
rect4.setAttribute("stroke","black");
rect4.setAttribute("stroke-width","0.5");
rect4.setAttribute("class", phonList[3]);
const txt = document.createElementNS("http://www.w3.org/2000/svg", "text");
txt.setAttribute("x","0");
txt.setAttribute("y","90");
txt.setAttribute("font-family","AR PL UKai TW");
txt.setAttribute("font-size","100");
txt.innerHTML = sin;
// attach it to the container
svg1.appendChild(rect1);
svg1.appendChild(rect2);
svg1.appendChild(rect3);
svg1.appendChild(rect4);
svg1.appendChild(txt);
}
// attach container to document
document.getElementById("output").appendChild(svg1);
}
</script>
</body>
</html>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment