Différence de remplissage de chemin SVG et VML

Je migre de VML vers SVG. Il y a un problème avec la façon dont le chemin est rempli. Voici un exemple:Différence de remplissage de chemin SVG et VML

star drawn with VML and SVG

Sur le côté gauche est étoile dessinée avec VML, et à droite avec SVG. code source pour VML (ne fonctionne que dans IE):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html xmlns:v="urn:schemas-microsoft-com:vml"> 
<head> 
    <style> v\:* { behavior: url(#default#VML); }</style > 
</head> 
<body> 
    <div style="width:300; height:270;"> 
     <v:shape fillcolor="blue" strokecolor="red" coordorigin="0 0" coordsize="300 270" 
      strokeweight="2" style="position:relative; top:20; left:20; width:300; height:270" 
      path="m150,20 l240,240 l30,90 l270,90 l60,240 x e"> 
     </v:shape> 
    </div> 
</body>

code source SVG:

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body> 
     <svg width="300" height="270"> 
      <path d="M150,20 L240,240 L30,90 L270,90 L60,240 Z" fill="blue" stroke="red" stroke-width="3"/> 
     </svg> 
    </body> 
</html>

Il y a une différence évidente à remplir au milieu de l'étoile. Je préfère le style VML. Y a-t-il un moyen de le faire avec SVG?

Source

2013-02-07 Luka

Bien sûr, vous voulez juste un evenodd fill-rule

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body> 
     <svg width="300" height="270"> 
      <path d="M150,20 L240,240 L30,90 L270,90 L60,240 Z" fill-rule="evenodd" fill="blue" stroke="red" stroke-width="3"/> 
     </svg> 
    </body> 
</html>

Source

2013-02-07 07:25:21

Différence de remplissage de chemin SVG et VML

Répondre

Questions connexes