2017-10-21 63 views
0

Je crée deux icônes SVG pour mon annonce de projet en essayant d'insérer sur ma page. Tout se passe bien, mais il y a un problème avec les images qui s'écaillent. Ils sont fabriqués en incscape à partir d'images de même taille, mais quand je les insérer dans la page que je reçois ceci:D3: Deux images SVG de taille similaire

enter image description here

j'ajouter des lignes pour montrer ce que va un. L'une des images est plus grande que l'autre.

Voici le code de blocs-je utiliser:

<g transform="translate(0.36859130859375,0)"> 
<rect width="200" height="110" fill="#EBDEE9" x="735" y="258" style="cursor: pointer;"></rect> 
<image xlink:href="/media/com_myrod/images/woman-icon.svg" width="100" height="100" x="725" y="263"></image> 
<text font-size="16px" fill="black" class="rod-fname-text" x="820" y="283" style="cursor: pointer;"></text> 
<text font-size="16px" fill="black" class="rod-fname-text" x="820" y="301" style="cursor: pointer;"></text><text font-size="16px" fill="black" class="rod-fname-text" x="820" y="319" style="cursor: pointer;"></text> 
<text font-size="16px" fill="black" class="rod-fname-text" x="820" y="337" style="cursor: pointer;"></text><text font-size="16px" fill="black" class="rod-fname-text" x="820" y="351" style="cursor: pointer;"></text> 
</g> 

Autre image ont même code, mais l'URL de l'icône est différente.

ici: svg fichiers

femme:

<svg 
    xmlns:dc="http://purl.org/dc/elements/1.1/" 
    xmlns:cc="http://creativecommons.org/ns#" 
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
    version="1.1" 
    id="svg836" 
    sodipodi:docname="woman-icon.svg" 
    inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"> 
    <defs 
    id="defs830" /> 
    <sodipodi:namedview 
    id="base" 
    pagecolor="#ffffff" 
    bordercolor="#666666" 
    borderopacity="1.0" 
    inkscape:pageopacity="0.0" 
    inkscape:pageshadow="2" 
    inkscape:zoom="0.35" 
    inkscape:cx="-36.360817" 
    inkscape:cy="101.5839" 
    inkscape:document-units="mm" 
    inkscape:current-layer="layer1" 
    showgrid="false" 
    inkscape:window-width="1920" 
    inkscape:window-height="1017" 
    inkscape:window-x="-8" 
    inkscape:window-y="-8" 
    inkscape:window-maximized="1" /> 
    <metadata 
    id="metadata833"> 
    <rdf:RDF> 
     <cc:Work 
     rdf:about=""> 
     <dc:format>image/svg+xml</dc:format> 
     <dc:type 
      rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> 
     </cc:Work> 
    </rdf:RDF> 
    </metadata> 
    <g 
    inkscape:label="Layer 1" 
    inkscape:groupmode="layer" 
    id="layer1"> 
    <path 
     style="fill:#000000;stroke-width:0.48401597" 
     d="m 60.712789,275.27775 -3.790372,-0.37549 c -2.084698,-0.20652 -7.283975,-0.91204 -11.553924,-1.56781 -4.269963,-0.65577 -10.032395,-1.52294 -12.805414,-1.92702 -2.773005,-0.4041 -8.590237,-1.66064 -12.92718,-2.79235 C 10.4919,266.22901 9.9072264,265.82556 8.3966104,260.8597 6.3669354,254.18754 5.3639364,248.12322 5.0676134,240.73194 3.901584,211.64823 17.937067,183.24261 37.887745,174.30911 44.743584,171.2392 47.958746,170.59 57.563158,170.33622 l 8.650123,-0.22857 0.298706,4.10227 c 1.025701,14.08613 11.490456,26.79405 26.275905,31.90827 4.163278,1.44007 4.579118,1.48995 12.419828,1.48995 7.84073,0 8.25657,-0.0499 12.41985,-1.48995 14.76057,-5.10562 25.25042,-17.82524 26.27215,-31.85667 l 0.29495,-4.05069 h 7.07672 c 11.29853,0 18.64631,1.97683 26.66197,7.17305 21.99739,14.26004 32.4475,48.84701 24.32282,80.50183 -1.58658,6.1815 -3.02803,8.71506 -5.50486,9.67553 -7.07287,2.74273 -36.87123,7.33728 -57.68068,8.8937 -24.09799,-0.0218 -58.043765,1.83211 -78.357851,-1.17719 z M 94.637114,153.73797 c -1.892886,-0.36896 -4.658448,-0.90695 -6.145708,-1.19555 -3.773941,-0.73231 -10.823821,-3.47615 -15.487189,-6.02768 -16.036227,-8.77411 -26.838543,-22.76785 -29.985178,-38.84395 -1.131453,-5.78063 -0.985995,-9.454717 0.485765,-12.269539 0.898278,-1.718002 1.229136,-3.107832 1.229136,-5.163183 0,-9.05414 4.2599,-21.321907 10.663241,-30.708305 3.018013,-4.423972 12.166081,-13.289908 16.730834,-16.214841 7.475103,-4.789783 16.150884,-8.199359 24.419365,-9.596791 5.6655,-0.957514 16.57177,-0.957514 22.23727,0 21.20907,3.584485 39.53361,18.087079 47.5532,37.635017 2.29347,5.590401 3.69961,11.321836 4.08793,16.662438 0.22523,3.097744 0.63371,4.912473 1.4712,6.535957 1.40554,2.724693 1.55125,7.319337 0.41601,13.119247 -3.69769,18.89144 -18.21707,35.04984 -38.34334,42.67172 -5.55772,2.10474 -16.96215,4.55694 -16.96215,3.64725 0,-0.18395 0.83463,-0.4638 1.85472,-0.62188 1.02011,-0.15811 2.6196,-0.83434 3.55446,-1.50278 0.93484,-0.66845 3.25297,-1.66113 5.15138,-2.20598 7.89506,-2.2659 16.8799,-10.40755 21.75356,-19.71206 3.55075,-6.77894 5.05198,-12.70036 5.05141,-19.92477 -3.7e-4,-4.41879 -0.13435,-5.12736 -1.49788,-7.92072 -3.01643,-6.179572 -7.44472,-11.135475 -13.06138,-14.617608 -3.54806,-2.199668 -9.78095,-4.411832 -13.48887,-4.787433 l -2.87647,-0.291371 -4.26802,3.870051 C 105.96339,98.259782 87.258187,105.5757 71.826424,104.79612 c -2.867566,-0.14486 -6.311582,-0.59529 -7.653368,-1.00096 -1.888023,-0.57079 -2.525503,-0.60656 -2.819498,-0.15817 -0.651695,0.99397 -0.430311,11.0771 0.31805,14.48568 2.424587,11.04352 8.723737,20.76646 17.717275,27.34722 4.540223,3.3222 15.146881,8.06362 18.038447,8.06362 0.49347,0 0.8972,0.21442 0.8972,0.4765 0,0.26205 -0.0553,0.459 -0.12292,0.43764 -0.0676,-0.0213 -1.67164,-0.34072 -3.564506,-0.70968 z" 
     id="path1392" 
     inkscape:connector-curvature="0"/> 
    </g> 
</svg> 

homme:

<svg 
    xmlns:dc="http://purl.org/dc/elements/1.1/" 
    xmlns:cc="http://creativecommons.org/ns#" 
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
    version="1.1" 
    id="svg8" 
    sodipodi:docname="man-icon.svg" 
    inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"> 
    <defs 
    id="defs2" /> 
    <sodipodi:namedview 
    id="base" 
    pagecolor="#ffffff" 
    bordercolor="#666666" 
    borderopacity="1.0" 
    inkscape:pageopacity="0.0" 
    inkscape:pageshadow="2" 
    inkscape:zoom="0.35" 
    inkscape:cx="-700.29561" 
    inkscape:cy="559.96269" 
    inkscape:document-units="mm" 
    inkscape:current-layer="layer1" 
    showgrid="false" 
    inkscape:window-width="1920" 
    inkscape:window-height="1017" 
    inkscape:window-x="-8" 
    inkscape:window-y="-8" 
    inkscape:window-maximized="1" /> 
    <metadata 
    id="metadata5"> 
    <rdf:RDF> 
     <cc:Work 
     rdf:about=""> 
     <dc:format>image/svg+xml</dc:format> 
     <dc:type 
      rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> 
     </cc:Work> 
    </rdf:RDF> 
    </metadata> 
    <g 
    inkscape:label="Layer 1" 
    inkscape:groupmode="layer" 
    id="layer1"> 
    <path 
     style="fill:#000000;stroke-width:0.476758" 
     d="M 82.876837,276.72443 C 48.21989,274.71322 29.861422,272.00912 13.749458,266.54233 5.5019066,263.74396 4.2423476,260.0288 5.3378746,241.7315 c 1.89833,-31.70539 9.3545544,-55.50855 20.3042014,-64.81874 7.069384,-6.0109 9.862655,-6.70646 26.770289,-6.66598 8.347482,0.0199 15.317831,0.192 15.489654,0.38225 0.171823,0.19023 0.579012,1.20369 0.904878,2.25213 7.011383,22.55906 39.690283,31.28016 60.803293,16.22673 5.76026,-4.10703 11.46707,-11.99431 12.4443,-17.19911 0.54513,-2.90338 29.13951,-2.52368 35.23768,0.46791 9.68858,4.75295 15.00204,11.97918 20.51973,27.90663 7.23724,20.89114 9.65421,56.94247 4.24794,63.36212 -2.9324,3.48205 -23.48945,8.3562 -46.21487,10.95769 -15.03369,1.72097 -58.227954,2.97669 -72.968133,2.1213 z M 97.900966,162.35269 c -15.741078,-4.17802 -31.516265,-21.8413 -35.499704,-39.74859 -0.437288,-1.9658 -1.511099,-4.96814 -2.386267,-6.67183 -3.817885,-7.4324 -4.978918,-18.342406 -2.362016,-22.195426 1.107628,-1.63082 1.107628,-1.63082 0.147876,-6.03987 -3.576537,-16.429523 0.06794,-29.91115 11.302486,-41.810493 12.412774,-13.147251 28.661745,-16.217409 49.162709,-9.289043 29.81165,10.074933 40.08273,25.585393 33.7265,50.930766 -1.24354,4.95857 -1.24354,4.95857 -0.26772,5.93359 3.13735,3.13474 2.36994,14.119476 -1.55318,22.232196 -0.88723,1.83475 -2.18505,5.37321 -2.88404,7.86323 -7.18383,25.59129 -30.40595,43.83333 -49.386604,38.79547 z" 
     id="path828" 
     inkscape:connector-curvature="0" /> 
    </g> 
</svg> 

Répondre

1

Les deux fichiers d'icônes manquent d'informations sur la taille. Selon l'agent utilisateur avec lequel votre page est affichée, les résultats peuvent différer et être incohérents. Ajouter un attribut

viewBox="5 30 200 250" 

aux deux fichiers d'icônes.

+0

Merci aide maintenant ils sont même taille. –