Problème de svg qui ne s'affichent pas correctement

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
coline35
Messages : 1
Enregistré le : 17 déc. 2020, 12:16

Problème de svg qui ne s'affichent pas correctement

Message par coline35 » 17 déc. 2020, 12:32

Bonjour,

Je suis actuellement en train de coder une animation mais j'ai un problème avec l'affichage de mes svg. En effet, comme on le voit sur la photo, il semble qu'il manque un point à mon O, le A et le O sont ouvert, et il y a des petits fioritures sur certains angles (comme le G ou le cadenas bleu). Je n'arrive pas à comprendre ce problème puisque mes svg sont bien propres quand je les ouvre seul. Quelqu'un pourrait-il m'aider :'( (je mets également le zip de mon code)!!!

Code : Tout sélectionner

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
	<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.10.0/matter.js'></script>
	<script src='https://codepen.io/garethfoote/pen/jrQqVW.js'></script>

</head>

<body>
	<svg id="svg" style="position:absolute; width: 0; height: 0; display: none;" version="1.1" xmlns="http://www.w3.org/2000/svg"
		xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
		<g>
			<path class="cls-2"
				d="M1178,2347.22c0-137.75,56.42-220,177.31-220,84.32,0,146.32,48.15,151.9,126.78h-58.9c-5.58-48.76-40.3-76.19-98.58-76.19-62,0-106.63,42.06-106.63,101.79v128c0,57.91,46.5,101.8,109.73,101.8,65.1,0,102.3-35.36,102.3-100v-28h-95.48v-51.81H1514v221.26h-56.42l-2.48-43.88c-21.7,31.69-53.94,53-107.26,53-107.25,0-169.87-82.29-169.87-212.74">
			<path class="cls-2"
				d="M1767.61,2554.37c-130.66,0-186.11-89-186.11-222.45s55.45-222.46,186.11-222.46,186.1,89,186.1,222.46S1898.26,2554.37,1767.61,2554.37Zm119.18-156.66V2266.12c0-64.54-53.54-104.64-119.18-104.64s-119.19,40.1-119.19,104.64v131.59c0,64.54,53.54,104.65,119.19,104.65S1886.79,2462.25,1886.79,2397.71Z">
			<path class="cls-2"
				d="M908.34 451.33 843.66 451.33 998.75 10.1 1068.71 10.1 1224.45 451.33 1158.66 451.33 1121.5 342.32 1035.65 342.32 1035.49 291.71 1105 291.71 1034.06 78.24 961.79 291.71 1032.16 291.71 1032.16 342.32 945.29 342.32 908.34 451.33" />
			<path class="cls-2"
				d="M2667.56,2468.58l107.25-320h91.76v414.5h-55.18V2210.14h-2.48l-119.66,352.93h-47.11l-120.28-352.93h-2.48v352.93H2464.2v-414.5h93l107.88,320Z" />
		</g>
	</svg>
	<svg id="svglogo" style="position:absolute; width: 0; height: 0; display: none;" version="1.1" xmlns="http://www.w3.org/2000/svg"
		xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
		<g>
			<path class="cls-1"
				d="M1808.24,2764l.49,34.92s-41.66,13.14-41.8,64.78c-.12,39.83,36.2,63.4,70.35,63.4s69.64-27.56,71.1-64.32-25.64-54.46-37-61.13c-8.21-4.84-36-14.22-57.84-4.57l-.49-33.08s31.6-13.33,78.75,10.1c0,0,18.56-93.26-51.52-98.78-62-4.88-57.36,62.95-57.36,62.95h-34.52s1.06-40.61,17.26-62.49,44.43-34,71.92-33.08,62,12.36,80,47.76,10.21,118.56,10.21,118.56,28.31,48.48,5.35,92.81c-23.22,44.83-56.8,57.11-96.39,57.11-36.2,0-107.28-29.54-105.34-100.29s64.65-91.9,76.8-94.65"
				transform="translate(-1730.9 -2642.19)" />
		</g>
	</svg>


	<div id="container_canvas" style="	width:100vw; height:100vh; z-index:2;"></div>

<script>
var url = 'https://raw.githubusercontent.com/progers/pathseg/master/pathseg.js';



loadGitHubScript(url).then(function () {

  // module aliases
  var Engine = Matter.Engine,
    Render = Matter.Render,
    World = Matter.World,
    Bodies = Matter.Bodies,
    Composites = Matter.Composites,
    Common = Matter.Common,
    Svg = Matter.Svg,
    Vertices = Matter.Vertices;

  // create an engine
  var engine = Engine.create();

  // create a renderer
  var render = Render.create({
    element: document.getElementById("container_canvas"),
    engine: engine,
    options: {
      width: window.innerWidth,
      height: window.innerHeight,
      wireframes: false,
      background: 'white'
    }
  });


  var vertexSets = [],
    color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']);

  $('#svg').find('path').each(function (i, path) {
    // vertexSets.push(Svg.pathToVertices(path, 100));
    var v = Bodies.fromVertices(150 + (i * 174), -2000+i*500, Svg.pathToVertices(path, 7), {
      render: {
        fillStyle: 'greenyellow',
        strokeStyle: 'greenyellow',

      }
    }, true);
    vertexSets.push(v);

    // World.add(engine.world, v);
  });

  $('#svglogo').find('path').each(function (i, path) {
    var v = Bodies.fromVertices(500 + (i * 104), -3000, Svg.pathToVertices(path, 10), {
      render: {
        fillStyle: 'blue',
        strokeStyle: 'blue',

      }
    }, true);

    vertexSets.push(v);
    
  });

  // APPLIQUER UNE ROTATION ALÉATOIRE À TOUS LES ÉLÉMENTS
  for (var i=0; i<vertexSets.length; i++)  {
    Matter.Body.rotate(vertexSets[i], Math.random()*180);
  }

  var offset = 10;
  var wallSize = 20;

  World.add(engine.world, [vertexSets,
    //bottom
    Bodies.rectangle(0, window.innerHeight+offset, window.innerWidth*2 , wallSize, {
      isStatic: true,
       render: {
        opacity:0
      }
    }),
    //right
    Bodies.rectangle(window.innerWidth+offset, 0, wallSize, window.innerHeight*2, {
      isStatic: true,
       render: {
        opacity:0
      }

    }),

    // // left
    Bodies.rectangle(-offset, 0, wallSize, window.innerHeight*2, {
      isStatic: true,
       render: {
        opacity:0
      }
    })
  ]);


  // add all of the bodies to the world
  Matter.World.add(engine.world, vertexSets);
  Engine.run(engine);
  Render.run(render);

  $(window).resize(function() {
   window.location.reload();
  });

});
</script>
</body>

</html>
Image
svg.zip
(4.37 Kio) Téléchargé 174 fois
Fichiers joints
Capture d’écran 2020-12-17 à 12.19.49.png
Capture d’écran 2020-12-17 à 12.19.49.png (107.77 Kio) Vu 2061 fois

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Problème de svg qui ne s'affichent pas correctement

Message par webmaster » 18 déc. 2020, 12:58

Bonjour

Si les SVG s'ouvrent correctement sur un autre visualiseur, je suspecte un probleme dans les librairies utilisées.
Il faudrait vérifier qu'il n'y a pas une mise à jour ou des problèmes signalés...
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre