13-03-2015, 10:23 AM
(Modification du message : 13-03-2015, 10:24 AM par starmindfr.)
Bonjour
En svg j'ai donc trouvé ce genre de code :
En svg j'ai donc trouvé ce genre de code :
Code PHP :
<?php
<svg width="0" height="0">
<clipPath id="clipShape">
<polygon points="960 2,960 53,624 54,594 85,362 86,325 53,3 51,2 3">
</polygon>
</clipPath>
</svg>
Le probleme c'est de le rendre "dynamique" pour que le pavé s'adapte a la taille de l'ecran
J'ai pas exemple ca en JS qui permet de generer la liste des points et les adapter avec quelques lignes en plus mais il y a plus simple peut etre ?
Code PHP :
<?php
function create() {
var svg = createSVG('canvas');
var poly = drawPoly("960 2,960 53,624 54,594 85,362 86,325 53,3 51,2 3", "#cc3333", "#660000");
svg.appendChild(poly);
}
function createSVG(container) {
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
svg.setAttribute('version', '1.1');
svg.setAttribute('id', 'id'); //id for reffering your svg
var canvas = document.getElementById(container); //id of your container element
width = canvas.getBoundingClientRect().width;
height = canvas.getBoundingClientRect().height;
svg.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
svg.setAttribute('preserveAspectRatio', 'none');
canvas.appendChild(svg);
return svg;
}
function drawPoly(points, fill, stroke) {
var poly = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
poly.setAttribute("points", points);
poly.setAttribute("stroke", stroke);
poly.setAttribute('fill', fill);
//svg.appendChild(poly); //where svg is referring to your sag element
return poly;
}