將SVG路徑數據轉換爲0-1範圍

我使用從Illustrator導出的相當複雜的SVG形狀作爲剪切路徑。將SVG路徑數據轉換爲0-1範圍

問題是，objectBoundingBox要求路徑數據在0-1範圍內，並且我的路徑包含超出此範圍的路徑數據。下面是我使用的是什麼：

<svg> 
    <clippath id="clipping" clipPathUnits="objectBoundingBox"> 
    <path d="M228.6,94.8L176.8, 5.5c-2-3.5-5.8-5.5-9.9-5.5H63.2c-4.1, 0-7.8, 1.9-9.9,5.5L1.5,94.9c-2, 3.5-2,7.8,0, 11.4  l51.8, 89.8c2,3.5, 5.8,5.9,9.9,5.9h103.7c4.1, 0, 7.8-2.4,9.9-6l51.8-89.7C230.7, 102.8,230.7, 98.3,228.6,94.8z M192.8,104.4l-35.5, 
     61.5c-1.4,2.4-4,4.1-6.8, 4.1h-71c-2.8,0-5.4-1.7-6.8-4.1l-35.5-61.4c-1.4-2.4-1.4-5.5,0-7.9l35.5-61.5c1.4-2.4,4-4.1,6.8-4.1h71c2.8, 0, 5.4,1.7,6.8,4.1l35.5, 61.4C194.2,98.9, 194.2, 102, 192.8, 104.4z"/> 
    </clippath> 
</svg>

有沒有簡單的解決方案，這個轉換爲0-1範圍，這樣我可以使用objectBoundingBox？

RE：Comment。我能夠將任何數量的轉換應用於SVG元素，但它仍然不能用於objectBoundingBox。例如：

<clippath id="clipping" transform="scale(1,1)" clipPathUnits="objectBoundingBox">

來源

2015-07-03 user1569701

把它包在變換，你可以有你喜歡的任何範圍。 –

幾種變化和該技術不起作用。你有成功的例子嗎？ – user1569701

通過編輯問題向我展示你所做的事情，並告訴你你錯在哪裏。 –

用下面的PHP腳本，您可以將他們：

$absolute_path = "M46.9819755,61.8637972 C42.0075109,66.8848566 35.0759468,70 27.4091794,70 C12.2715076,70 0,57.8557238 0,42.875 C0,32.9452436 5.3914988,24.2616832 13.4354963,19.534921 C14.8172134,8.52285244 24.3072531,0 35.8087666,0 C43.9305035,0 51.0492374,4.2498423 55.01819,10.6250065 C58.2376107,8.87215568 61.9363599,7.875 65.8704472,7.875 C78.322403,7.875 88.4167076,17.8646465 88.4167076,30.1875 C88.4167076,32.1602271 88.1580127,34.0731592 87.6723639,35.8948845 L87.6723639,35.8948845 C93.3534903,38.685457 97.2583784,44.4851888 97.2583784,51.1875 C97.2583784,60.6108585 89.5392042,68.25 80.0171204,68.25 C75.4841931,68.25 71.3598367,66.5188366 68.2822969,63.6881381 C65.5613034,65.4654463 62.3012892,66.5 58.7971106,66.5 C54.2246352,66.5 50.0678912,64.7384974 46.9819755,61.8637972 Z"; 
function regex_callback($matches) { 
    static $count = -1; 
    $count++; 
    $width = 98; 
    $height = 70; 
    if($count % 2) { 
     return $matches[0]/$height; 
    } else { 
     return $matches[0]/$width; 
    } 
} 

$relative_path = preg_replace_callback('(\d+(\.\d+)?)', 'regex_callback', $absolute_path);

只需設置根據您的外接矩形框的適當的寬度和高度的變量。

該腳本可以在以下問題的回答中找到： How to apply clipPath to a div with the clipPath position being relative to the div position

來源

2015-09-08 21:03:34 skywlkr

太棒了！這個腳本可以工作！但不幸的是，我最終失去了我的SVG文件中的一些點... =（ – giovannipds

哦，我的錯誤！我已經改變了寬度和高度值！非常感謝你們!!!我甚至不知道有多少時間謝謝，謝謝！也許我們可以在其他地方託管這些代碼，甚至將它翻譯成其他語言（如JavaScript）。= D非常好！<3 < 3 <3 – giovannipds

更多人與[同樣的問題]（https://stackoverflow.com/questions/41752027/is-it-possible-to-make-a-svg-clippath-with-a-path-responsive）。 – giovannipds

將SVG路徑數據轉換爲0-1範圍

回答

相關問題