圆形文字周围的圆形文字 [英] Circular text around a circle image
问题描述
尝试将SVG路径文本放置在圆形图像的顶部.
使用rounded-circle
将方形图片四舍五入.围绕它绘制了SVG路径,并用于编写文本.结果:
Tyring to put a SVG path text on top of a circle image.
A square picture is rounded up useing rounded-circle
. A SVG path is drawn around it and use to write a text. Resulting in :
<div class="mt-3 row">
<div class="col-9 CircleThing" style="background-color: coral;">
<img src="https://via.placeholder.com/500/" alt="contact" class="rounded-circle">
<svg width="600" height="600">
<!--Base circle for the text-->
<!--<circle id="curve" cx="270" cy="270" r="260" stroke="black" stroke-width="3" fill="red" />-->
<path id="curve" fill="transparent"
d="M 10, 270
a 260,260 0 1,0 520,0
a 260,260 0 1,0 -520,0 " />
<text width="520">
<textPath xlink:href="#curve" >
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</textPath>
</text>
</svg>
</div>
</div>
Css:
.CircleThing {
font-family: Gill Sans Extrabold;
font-size: 50px;
}
问题:
在上一次尝试中,我遇到多个问题:
1/. svg不在img上.
2/.文本从左下角开始,而我希望在右下角.
为了创建路径,我首先做了一个SVG圈,然后阅读 https ://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d 推导出路径为:
Issue:
In my last try I have multiple issue:
1/. The svg is not on top of the img.
2/. The text start in the bottom left corner while I want it to in the right.
To create the path I first did a SVG circle and after reading https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d deduce it path to be :
M cx, cy
a r,r 0 1,0 (r * 2),0
a r,r 0 1,0 -(r * 2),0
3/.文字上下颠倒或由内而外.右上四分之一
3/. The text is upside down or Inside out. for the top right quatter
推荐答案
这是我的解决方案.请注意,我已经将#curve
反转为textPath
.另外,我已经将图像移到SVG内,并用clipPath
进行了四舍五入.如果您需要使其具有响应性,那么这一点很重要.
This is my solution. Please note that I've reversed the #curve
for the textPath
. Also I've moved the image inside the SVG and rounded with clipPath
. This is important if you need to make it responsive.
svg{width:90vh;}
<div class="mt-3 row">
<div class="col-9 CircleThing" style="background-color: coral;">
<svg viewBox="-30 -30 600 600" style="background-color: black;">
<defs>
<path id="curve" d="M 10, 270 a 260,260 0 1,1 520,0 a 260,260 0 1,1 -520,0 " />
<clipPath id="clip">
<path d="M 40, 270a 230,230 0 1,0 460,0a 230,230 0 1,0 -460,0 " />
</clipPath>
</defs>
<image xlink:href="https://via.placeholder.com/500/" clip-path="url(#clip)"/>
<text fill="white" font-size="40">
<textPath xlink:href="#curve" >
some words
</textPath>
</text>
</svg>
</div>
</div>
这篇关于圆形文字周围的圆形文字的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!