如何在 svg 中为贝塞尔曲线的笔划添加纹理？

Posted 2023-03-23

【中文标题】如何在 svg 中为贝塞尔曲线的笔划添加纹理？

【英文标题】：How to add a texture to the stroke of a Bezier curve in an svg?

【发布时间】：2022-01-03 05:43:21

【问题描述】：

不是to fill a region bounded by a bezier curve and a line。

例如这是一个非常简单的描边贝塞尔曲线

<?xml version="1.0" standalone="no"?>
<svg   xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polyline points="40 60 80 20 120 60" stroke="black" stroke-
        stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
</svg>

然后直观地我们希望将stroke 属性值从"black" 设置为类似于"./assets/62562367236.jpg"。但是这样不行。

<?xml version="1.0" standalone="no"?>
<svg   xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polyline points="40 60 80 20 120 60" stroke="https://media.freestocktextures.com/cache/0d/42/0d42eeb83ad3a56c97468d69721b2c18.jpg" stroke-
        stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
</svg>

而实际上我想要的是类似于这里描述的东西：

【问题讨论】：

请看这个例子：codepen.io/enxaneta/pen/6f3b5b7ad8bf46fe05a7f25e626513ba 其中笔画是一个图案

解决方案与Fill SVG path element with a background-image 相同，但对于stroke 而不是fill 属性：创建带有id 的模式定义，然后通过片段标识符指向它属性。

@Mike'Pomax'Kamermans，由于某种原因，我的中风并没有解决。

但是@enxaneta 提交的示例确实成功了！多谢你们！你会说我应该发布相应的答案吗？还是我们应该放下这个Q？

使用该答案中的示例代码对我来说很好，所以据我所知，这个问题只是一个直接的重复。

【参考方案1】：

正如评论中指出的那样@Mike 'Pomax' Kamermans

创建一个带有 id 的模式定义，然后通过片段指向它 属性中的标识符

我添加了曲线代码并计算了图案所需的尺寸

<style>
.container 
width:25vw;
height:auto;

</style>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 180 180">
      <defs>
        <pattern id="patt" patternUnits="userSpaceOnUse"  >
          <image href="https://media.freestocktextures.com/cache/0d/42/0d42eeb83ad3a56c97468d69721b2c18.jpg"
                 x="0" y="0"   />
        </pattern>
      </defs>
       <path id="path" d="M25.21 135.78s55.95 5.97 81.76-14.4c38.26-30.2  31.7-76.72 31.7-76.72" 
       fill="none" stroke="url(#patt)" stroke-
         stroke-linecap="round" />
    </svg> 
</div>