Comment à l'échelle SVG chemin

J'ai essayé à l'échelle de la svg chemin comme élément. Mais la généralisation de fonctionne bien pour l'élément div ne fonctionne pas pour le svg élément de chemin. J'ai joint mon code ci-dessous. Toute suggestion?

CSS:

<style>
    .two {
        transition: all 2s ease-in-out 0.5s;
        -webkit-transition: all 2s ease-in-out 0.5s;
    }
    
    #scale {
        height: 150px;
        width: 100px;
        text-align: center;
        margin: 0 auto;
    }
    
    #scale {
        border: 1px blue solid;
    }
    
    .grow:hover {
        transform: scale(2.0);
        -ms-transform: scale(2.0);
        -webkit-transform: scale(2.0);
    }
</style>

HTML:

<body>
    <svg width="1350" height="900">
        <path d="M 673 248.625 A 67.875 67.875 0 0 1 740.1841400272543 326.159552463664 L 673 316.5 A 0 0 1 0 0 673 316.5 z" id="scale" class="two grow"></path>
    </svg>
</body>

Peut-être que vous pourriez mettre en œuvre à l'échelle par modifier le format svg fenêtre d'affichage? E. g. jonibologna.com/svg-viewbox-and-viewport/#expandingviewport

InformationsquelleAutor Sanjith | 2016-12-22

3

Votre code est plutôt cassé. Vous n'avez pas besoin d'ajouter <body> ou <style> balises pour un début. En particulier, il ressemble à la supplémentaires <style> tag a fait des déclarations pour le .two classe impossible à analyser.

Un autre problème est que les attributs CSS comme border ne s'appliquent pas aux éléments SVG. Essayez d'utiliser stroke et/ou stroke-width à la place.

Peut-être le principal problème, c'est que votre contenu SVG est décalé tout à fait un long chemin depuis l'origine. Lorsque vous mettre à l'échelle par un facteur de 2, vous êtes tout simplement de doubler toutes les coordonnées. En conséquence, le dessin est en train de disparaître hors de le coin inférieur droit de l'SVG vue de la boîte. La façon la plus simple de résoudre ce problème est d'utiliser un <g> élément de repositionner le SVG origine.

Voici un exemple simple avec un triangle centré au milieu de la SVG:

CSS:
```
.two {
  transition: all 2s ease-in-out 0.5s;
  -webkit-transition: all 2s ease-in-out 0.5s;
}
#scale {
  height: 150px;
  width: 100px;
  text-align: center;
  margin: 0 auto;
}
#scale {
  fill: yellow;
  stroke: blue;
  stroke-width: 2px;
}
.grow:hover {
  transform: scale(2.0);
  -ms-transform: scale(2.0);
  -webkit-transform: scale(2.0);
}
```
HTML:
```
<svg width="220" height="220">
  <g transform="translate(110,110)">
    <path d="M0 -43.3 50 43.3 -50 43.3Z"
          id="scale" class="two grow" />
  </g>
</svg>
```
- Merci pour votre suggestion. Cela fonctionne bien dans le navigateur chrome. Mais dans Internet Explorer, il n'est pas de travail. Comment y parvenir dans IE?
- D'où vient le 110,110 de <g transform="translate(110,110)"> proviennent d'?
- Qui place l'origine des coordonnées au centre de la viewBox (qui est de 220 de large et 220 de haut). Le triangle est dessiné centrée sur cette origine, de sorte que lorsque son échelle est modifiée, elle pousse sans bouger n'importe où. (Le scale transformer multiplie toutes les coordonnées par la même quantité, de sorte que si l'origine était encore en haut à gauche de l'SVG, canvas, puis le triangle serait zoom off en bas à droite quand il est mis à l'échelle dans la taille.)
InformationsquelleAutor squeamish ossifrage

Éléments SVG échelle vers ou loin de l'origine. Par défaut, qui est la partie supérieure gauche de la SVG.

Si vous voulez que votre forme à l'échelle autour d'un point dans le milieu de votre forme, vous pouvez utiliser transform-origin pour définir le nouveau point d'origine.

Voir démonstration ci-dessous.

CSS:

<style>
    .two {
        transition: all 2s ease-in-out 0.5s;
        -webkit-transition: all 2s ease-in-out 0.5s;
    }
    
    #scale {
        height: 150px;
        width: 100px;
        text-align: center;
        margin: 0 auto;
    }
    
    #scale {
        border: 1px blue solid;
    }
    
    .grow:hover {
        transform-origin: 707px 287px;
        transform: scale(2.0);
        -ms-transform: scale(2.0);
        -webkit-transform: scale(2.0);
    }
</style>

HTML:

<body>
    <svg width="1350" height="900">
        <path d="M 673 248.625 A 67.875 67.875 0 0 1 740.1841400272543 326.159552463664 L 673 316.5 A 0 0 1 0 0 673 316.5 z" id="scale" class="two grow"></path>
    </svg>
</body>

InformationsquelleAutor Paul LeBeau

Vous devez vous connecter pour publier un commentaire.