将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范围

回答

相关问题