2009-09-23 5 views
5

Je développe un programme qui génère des fichiers svg en fonction des choix effectués par l'utilisateur. L'un de ces choix est d'inclure un autre fichier svg centré sur un point spécifique dans le premier. Le deuxième fichier a un format d'image et une taille inconnus, mais il doit être redimensionné à une taille maximale spécifique, soit en hauteur ou en largeur, et doit être centré sur un point spécifique. La méthode que j'utilise maintenant consiste à avoir une balise G qui contient la balise SVG de l'image incluse, et effectuer une transformation sur la balise G pour l'échelle et la traduction. Y at-il un moyen d'effectuer l'échelle pour obtenir une taille spécifique sans connaître la taille de l'image? Et est-il possible d'avoir les coordonnées traduites à appliquer au centre de l'image au lieu du coin supérieur gauche? Je suis très novice en SVG, donc il se peut que je m'y prenne mal. Y a-t-il peut-être un meilleur moyen d'obtenir les mêmes résultats?Comment centrer et mettre à l'échelle les fichiers SVG dans un autre fichier SVG

+0

Il est dommage qu'il n'y a pas de réponse à cette question, peut-être il devrait être plus précis ou être retagged? – Parsa

Répondre

0

Je suppose que vous voulez d'abord l'autre en JavaScript faire quelques calculs simples fichier SVG caché, appel .getBBox(), définissez les paramètres appropriés, unhide il

0

Je comprends ce que vous entendez, ou moins, je penser que. Il n'y a pas de meilleure idée dans mon esprit pour faire cela au lieu de grouper. Pour moi <g> est le meilleur moyen de manipuler avec un fragment de document SVG. Mais à mon avis, considérons l'élément <rect> comme contenant pour vos données visuelles. Peut-être alors <g> ne serait pas nécessaire, dépend de vos exigences de codage.

Si vous avez besoin de mettre seulement simple image SVG, vous pouvez le faire comme:

<image id="yourSVGImage" xlink:href="yourImg.svg" 
     x="24px" y="50px" width="527px" height="328px" 
      preserveAspectRatio="XMinYMin meet"/> 

Si vous exprimez « largeur » et « hauteur » en unités fixes (tels que pixels) vous obtiendrez ce que je Je pense que vous avez besoin. Aussi "preserveAspectRatio" est là pour jeter un oeil à cet attribut si vous en avez besoin.

0

Éditer: cette réponse vous oblige à connaître la taille du SVG interne. La méthode la plus découplée consiste à utiliser la méthode getBBox() côté navigateur, en utilisant probablement visibility ou display pour empêcher les utilisateurs de voir les graphiques non mis à l'échelle. Le jsFiddle example est mis à jour pour utiliser cette méthode. Pour la mise à l'échelle, utilisez le viewBox attribute. À partir de la documentation du W3C:

Il est souvent souhaitable de spécifier qu'un ensemble de graphiques donné s'étire pour s'adapter à un élément de conteneur particulier. L'attribut 'viewBox' fournit cette fonctionnalité.

Tous les éléments qui établissent une nouvelle fenêtre (voir elements that establish viewports), ... ont un attribut 'viewBox'. La valeur de l'attribut 'viewBox' est une liste de quatre nombres <min-x>, <min-y>, <width> et <height>, ... qui spécifient un rectangle dans l'espace utilisateur qui doit être mappé aux limites de la fenêtre établie par l'élément donné, en prenant en compte compte attribute ‘preserveAspectRatio’.

Example ViewBox illustre l'utilisation de l'attribut 'viewBox' sur l'élément svg le plus externe pour spécifier que le contenu SVG doit s'étendre pour s'adapter aux limites de la fenêtre.

L'exemple ci-dessus indique preserveAspectRadio comme none, de sorte que le SVG intégré étend pour adapter le conteneur SVG exactement. La valeur par défaut de preserveAspectRadio, qui est xMidYMid meet, devrait correspondre à vos besoins. Cet attribut vous permet un contrôle fin sur how to scale and position the enclosed graphics.

Une fois que vous avez mis à l'échelle le SVG interne à une taille connue avec viewBox, le centrage devrait être un simple calcul et l'utilisation de l'attribut transform correctement. Voici un exemple de démonté http://jsfiddle.net/ento/hPuBY/:

<g transform="translate(125, 125)"> 
    <!-- inner SVG is scaled to fit 150x150 --> 
    <svg width="150" height="150" viewBox="0 0 1500 1000"> 
    <!-- coordinate system inside the SVG is 0x0 <> 1500x1000 --> 
    <rect width="1500" height="1000" /> 
    <text x="750" y="550" font-size="150"> 
     Embedded SVG 
    </text> 
    </svg> 
</g>