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

Question

不是。

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

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

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

<?xml version="1.0" standalone="no"?>
<svg width="160" height="80" 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-width="20"
        stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
</svg>

而实际上我想要的是此处描述的内容：

Answer 1

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

create a pattern definition with an id, then point to that by fragment identifier in the attribute

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

<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" width="170" height="170">
          <image href="https://media.freestocktextures.com/cache/0d/42/0d42eeb83ad3a56c97468d69721b2c18.jpg"
                 x="0" y="0" width="680" height="460" />
        </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-width="32"
         stroke-linecap="round" />
    </svg> 
</div>

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

How to add a texture to the stroke of a Bezier curve in an svg?

svg

bezier

web-frontend

texture-mapping