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>

來源

2017-10-10 Piotr

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

來源

2017-10-10 18:55:24

SVG圖像剪輯路徑不希望向右移動40％

回答

相關問題