svg - 如何将此图像“覆盖”到我的路径?
问题描述
如何在此形状内正确显示个人资料图片而不是剪切图像?
<Svg
height="300"
width="300"
>
<Defs>
<ClipPath id="clip">
<Path d="M136.5 85 189 136 136.5 187 84 136z" />
</ClipPath>
</Defs>
<Image
x="0"
y="0"
width="100%"
height="100%"
href={{ uri: "https://cdn.business2community.com/wp-content/uploads/2017/08/blank-profile-picture-973460_640.png" }}
clipPath="url(#clip)"
preserveAspectRatio="xMinYMid meet"
/>
</Svg>
目前它看起来像:
但这是图像的剪裁,而不是“贴合”它的形状——我正在努力实现“封面贴合”。
解决方案
在调整图像大小后应用剪辑路径,因此您必须适当地定位和调整图像大小。这是一个纯 SVG 版本,可以按照我认为您想要的方式工作:
<svg
height="300px"
width="300px">
<defs>
<clipPath id="clip">
<path d="M136.5 85 189 136 136.5 187 84 136z" />
</clipPath>
</defs>
<image x="28%" y="27%" width="35%" height="35%"
xlink:href="https://cdn.business2community.com/wp-content/uploads/2017/08/blank-profile-picture-973460_640.png"
clip-path="url(#clip)"/>
</svg>
推荐阅读
- firebase - Firebase 事件参数记录突然降至零
- python - Python Seaborn FacetGrid 不同的 y 轴
- abap - SAP Credit note - 项目数据文本(语言问题)
- java - 从文本文件中打印单词
- c# - 转换表达式
> 到表达式 >> - mlr - 合并多个交叉验证(相同的任务,相同的学习者)
- reactjs - React 钩子 - 无法在输入字段中输入 [不重复]
- c# - 实体框架 6:上下文在 Code First 模式下与从 EDMX 文件生成的代码一起使用
- android - 如何在 kotlin 中使用 addTextChangedListener 从 editText 获取全文
- php - 使用背包 4.1 操作请求数据