SVG图像剪辑路径不希望向右移动40％

问题描述：

我嵌套 “SVG” 不响应指定为 “x坐标” 的值40％...

我用这个嵌套SVG ...

<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>

的 “x” 具有上的SVG整体没有影响....它是一个**元件**属性。 - https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/x你最好改变'viewbox'。你确实有其中一个......对吧？ –

我注意到，如果你删除clipPath id =“uniqueId”形式的HTML - >然后x = 40％的作品，但是，当然，我想包括剪辑路径 - >这就是整个点 – Piotr

答

更改transform属性的translate()组件中的X值。要向左移动，请将其设为负值。 900 40％是360所以下面应为约右：

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>

SVG图像剪辑路径不希望向右移动40％

相关推荐