SVG IMAGE clip-path ne veut pas se déplacer 40% vers la droite

Comment déplacer SVG clip-path 40% vers la droite?SVG IMAGE clip-path ne veut pas se déplacer 40% vers la droite

Mon emboîtée "svg" ne répond pas à spécifiée pour elle "coordonnée x" de la valeur de 40% ...

je SVG imbriqué pour cette ...

<svg width="120%" height="855"> 
    <svg width="900px" height="855px" x="40%" y="10"> 
     <clipPath id="uniqueId" > 
     <path transform="translate(0,664.000000) scale(0.100000,-0.100000)" 
     fill="#000000" stroke="none"d="M23 6616 c32 -51 1686 -2932 1691 -2946 4 -11 -57 -52 -226 -150 
     -127 -75 -231 -139 -232 -142 -2 -11 1959 -3368 1967 -3368 5 0 505 288 1112 
     640 607 352 1107 640 1112 640 4 0 37 -50 72 -110 l64 -110 47 27 c26 16 626 
     368 1334 783 922 541 1285 759 1283 770 -3 8 -320 562 -706 1230 -387 668 
     -703 1219 -704 1223 -2 8 550 327 2073 1198 l575 329 -4100 -1 c-2255 0 -4387 
     2 -4738 4 l-638 5 14 -22z"/> 
     </clipPath> 
</svg> 
</svg>

Source

2017-10-10 Piotr

"x" n'a pas d'effet sur un SVG dans son ensemble .... il est un élément ** ** attribut. - https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/x Vous feriez mieux de changer la 'viewbox'. Vous en avez un de ces ... pas vrai? –

J'ai remarqué que si vous supprimez clipPath id = "uniqueId" formulaire HTML -> alors x = 40% fonctionne, mais, bien sûr, je veux inclure clip-path -> c'est tout le point – Piotr

Modifiez la valeur X dans le composant translate() de l'attribut transform. Pour le déplacer vers la gauche, faites-en une valeur négative. 40% de 900 360 est donc ce qui suit devrait être de droite:

transform="translate(-360, 664.000000) scale(0.100000,-0.100000)"

body { 
 
     overflow-x:hidden; 
 
} 
 

 

 
.mega { 
 
    position:absolute; 
 
    width:120%; 
 
    height:100%; 
 
    clip-path: url("#uniqueId"); 
 
    overflow-x:hidden; 
 

 
    }

<!-- This is the video used for SVG clipping --> 
 

 
<video autoplay="" loop="" class="mega"> 
 
     <source src="https://gekos.pl/wp-content/themes/gekos/video/slider.mp4" type="video/mp4"> 
 
     <source src="https://gekos.pl/wp-content/themes/gekos/video/slider.ogg" type="video/ogg"> 
 
     <source src="https://gekos.pl/wp-content/themes/gekos/video/slider.webm" type="video/webm"> 
 
</video> 
 

 

 

 
<!-- Code below is where I am applying clipping the the video, my nested "svg" is not responding to specified for 
 
it "x coordinate" of value 40% --> 
 
     
 
<svg width="120%" height="855"> 
 
    <svg width="900px" height="855px"> 
 
     <clipPath id="uniqueId" > 
 
     <path transform="translate(-360, 664.000000) scale(0.100000,-0.100000)" 
 
     fill="#000000" stroke="none"d="M23 6616 c32 -51 1686 -2932 1691 -2946 4 -11 -57 -52 -226 -150 
 
     -127 -75 -231 -139 -232 -142 -2 -11 1959 -3368 1967 -3368 5 0 505 288 1112 
 
     640 607 352 1107 640 1112 640 4 0 37 -50 72 -110 l64 -110 47 27 c26 16 626 
 
     368 1334 783 922 541 1285 759 1283 770 -3 8 -320 562 -706 1230 -387 668 
 
     -703 1219 -704 1223 -2 8 550 327 2073 1198 l575 329 -4100 -1 c-2255 0 -4387 
 
     2 -4738 4 l-638 5 14 -22z"/> 
 
     </clipPath> 
 
</svg> 
 
</svg>

Source

2017-10-10 18:55:24

SVG IMAGE clip-path ne veut pas se déplacer 40% vers la droite

Répondre

Questions connexes