相关疑难解决方法(0)

我对SVG的经验很少,我试图从插图画家中保存一条路径,以便它可以用作响应式剪贴蒙版,其大小相对于其父级,使用clipPathUnits="objectBoundingBox".

但是,Illustrator似乎不允许我在0和之间使用相对路径值,1并且只导出绝对值.

我怎么能得到像这样的代码......

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 100 100">
    <clippath id="clipping-mask">
        <path d="M49.401,64H36.3V30.648h11.201c3.9,0,7.15,0.25,10.501,2.4c4.95,3.15,7.1,8.45,7.1,14.151
    C65.102,56.75,59.352,64,49.401,64z M48.501,38.148h-3.7V56.5h3.65c5.7,0,8.15-3.65,8.15-9.051
    C56.602,42.148,54.252,38.148,48.501,38.148z"/>
    </clippath>
</svg>

......相对于其父母？

谢谢!

不知道我是否正确地制定了标题，但是问题来了。

我有一个像云一样的形状的SVG路径，我想在CSS中使用该clip-path属性。

<path d="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" fill="lightblue" />

当我在HTML中添加SVG元素并<clipPath>使用该路径进行定义时，浏览器会将剪切路径放置在左上角。如果我对剪切的元素应用边距，则遮罩未链接，并保持在其初始位置。

其他类似的线程指出clipPathUnits="objectBoundingBox"应将属性添加到<clipPath>对象，但这似乎无法解决我的问题。我什至将路径从绝对路径转换为相对路径，并像这样尝试，但是得到了相同的结果。

是否可以通过某种方式将剪切路径与剪切元素链接，以便在将定位应用于剪切元素时，剪切路径也会移动？

这是相对路径，如果有帮助的话：

<path d="M46.9819755,61.8637972c-4.974,5.021,-11.906,8.136,-19.573,8.136c-15.137,0,-27.409,-12.144,-27.409,-27.125c0,-9.93,5.392,-18.613,13.436,-23.34c1.381,-11.012,10.871,-19.535,22.373,-19.535c8.122,0,15.24,4.25,19.209,10.625c3.22,-1.753,6.918,-2.75,10.852,-2.75c12.452,0,22.547,9.99,22.547,22.313c0,1.972,-0.259,3.885,-0.745,5.707l0,0c5.682,2.791,9.586,8.59,9.586,15.293c0,9.423,-7.719,17.062,-17.241,17.062c-4.533,0,-8.657,-1.731,-11.735,-4.562c-2.721,1.778,-5.981,2.812,-9.485,2.812c-4.572,0,-8.729,-1.761,-11.815,-4.636z fill="lightblue" />

以及一些测试HTML / CSS。（我将left属性设置为，10px以便您看到出现裁剪问题）

<path d="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 …

所以我一直试图为一些不同颜色的文本制作挥动动画,因为我正在使用<clipPath>和-webkit-clip-path.在.holderdiv包含在灰色彼此具有相同的文字,在一个白色,一个的顶部的两个元素,并且clip-path被施加到后面.

问题是我需要<path>坐标与文本的大小成比例.这是一个小提琴演示.

• 我试过设置一个viewBox="0 0 100 100",它不起作用.

• 我也试过使用,clipPathUnits="objectBoundingBox"但它似乎在这种情况下不起作用,我猜是因为文本是display:inline.

现在,如果这些似乎过于复杂的分析,并了解基本概念,并愿意做你的方式,去了,我是这样开在这一点上的建议.

另外,我试图避免JavaScript这样做,但如果你必须,继续,没问题:)

这是原始代码:

HTML

<div class="container">
    <div class="holder">
        <div class="back">Text</div>
        <div class="front">Text</div>
        <svg viewBox="0 0 100 100" preserveAspectRatio="none">
            <clipPath id="path">
                <path fill="transparent" stroke="black" >
                    <animate 
                        attributeName="d" 
                        attributeType="XML" 
                        values="M 0 50 Q 25 60, 50 50 T 100 50 L 100 100 L 0 100 Z;M 0 50 Q 25 40, 50 50 T …

我在缩放内联 SVG 时遇到问题，以便在 CSS 中将其剪辑路径（在示例中到我要显示的图像的容器）。

我已经看到其他类似的问题及其解决方案，但它们仍然无法按预期工作：

<style>
  .cutR{
        clip-path: url(#cutR)
    }

.blogMainArticleMedia{
  float:left;
  width:100%
}

.image{
  float:left;
  display:block;
  width:100%
}
</style>
<div class="blogMainArticleMedia cutR">
  <img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg" alt="image" class="image">
</div>


<svg width="0" height="0" preserveAspectRatio="none">
    <defs>
        <clipPath id="cutR" clipPathUnits="objectBoundingBox">
            <path d="M0,0c1.45,81.4 320,80 320,80l320,0l320,0c0,0 320,0.62 320,80c0,105.84 0,400 0,400c-1.45,81.4 -320,80 -320,80l-640,0c-171.919,0.239 -319.7,-0.491 -320,80l0,-720Z"
            style="fill:none;" />
        </clipPath>
    </defs>
</svg>

https://codepen.io/thepra/pen/wNdpXW

他们建议将路径的坐标缩放到 0 到 1 之间的范围，但我找不到任何软件选项（Affinity Designer）或在线工具来执行此操作。

有人解决了这个缩放问题吗？

ps：这是路径的形状