使用 HTML CSS 将文本环绕成圆形
Wrap Text in a Circle Shape Using HTML CSS
我正在尝试将文本环绕成圆形，我已完成所有操作，但文本被信息图标弄乱了。我需要的是将文本稍微放在圆圈的底部，以便文本能够响应。
我附上了屏幕截图和 Tailwind Play link。
Here is the Output:
https://play.tailwindcss.com/bOKYfNPjxF
It should be look like this:
<style>
.svg {
fill: currentColor;
height: auto;
max-width: 66vmin;
transform-origin: center;
width: 135px;
}
</style>
<div class="text-black">
<fieldset>
<div class="bg-gray-200 p-4 mt-2 items-center flex grid grid-cols-5 gap-x-4 gap-y-8 sm:grid-cols-5 sm:gap-x-6 lg:grid-cols-5 xl:gap-x-8" style="background-color: rgba(255,255,255,.08);">
<!--new -->
<div class="relative h-full flex justify-center items-center">
<label data-id="Rosehip Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500">
<svg class="svg absolute" viewBox="0 0 100 100" width="100" height="100">
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text font-size="10">
<textPath xlink:href="#circle" class="text-black versailles">
Recommendation based on your skin goals
</textPath>
</text>
</svg>
<span aria-hidden="true" class="oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full">
<img src="https://selection-app.netlify.app/assets/thumbnails/Marula-Oil.png" class="rounded-full" alt="">
</span>
<input type="radio" name="default_oil" data-title="Argan Oil" data-id="default_oil" value="Argan Oil_10" class="sr-only">
<div class="oil_label_checked_icon absolute inset-x-0 top-0 transform translate-y-px hidden">
<div class="flex justify-center transform -translate-y-1/2">
<svg class=" h-6 w-6 text-green-600 ml-10 mt-20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
</div>
</div>
</label>
<div class="info_icon oil_info_icon absolute bottom-0" data-id="Rosehip Oil">
<div class="flex justify-center transform -translate-y-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white mt-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<!-- <span class="absolute inline-flex items-center p-2 rounded-full text-xs font-medium bg-black text-white mb-2 hidden"> </span> -->
<span class="absolute text-xs sm:text-sm font-medium text-white bottom-0 mt-2"> Smooth </span>
</div>
</div>
<div class="flex justify-center mt-5 mb-5 remove_preview_oil_btn hidden">
<span class="">
<button type="button" class=" border border-red-600 rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">Remove from cart</button>
</span>
</div>
</fieldset>
</div>
将 style="transform: rotate(-55deg); transform-origin: center;" 添加到您的 SVG 文本似乎有效：
.svg {
fill: currentColor;
height: auto;
max-width: 66vmin;
transform-origin: center;
width: 135px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="text-black">
<fieldset>
<div class="bg-gray-200 p-4 mt-2 items-center flex grid grid-cols-5 gap-x-4 gap-y-8 sm:grid-cols-5 sm:gap-x-6 lg:grid-cols-5 xl:gap-x-8" style="background-color: rgba(255,255,255,.08);">
<!--new -->
<div class="relative h-full flex justify-center items-center">
<label data-id="Rosehip Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500">
<svg class="svg absolute" viewBox="0 0 100 100" width="100" height="100">
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text font-size="10" style="transform: rotate(-55deg); transform-origin: center;">
<textPath xlink:href="#circle" class="text-black versailles">
Recommendation based on your skin goals
</textPath>
</text>
</svg>
<span aria-hidden="true" class="oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full">
<img src="https://selection-app.netlify.app/assets/thumbnails/Marula-Oil.png" class="rounded-full" alt="">
</span>
<input type="radio" name="default_oil" data-title="Argan Oil" data-id="default_oil" value="Argan Oil_10" class="sr-only">
<div class="oil_label_checked_icon absolute inset-x-0 top-0 transform translate-y-px hidden">
<div class="flex justify-center transform -translate-y-1/2">
<svg class=" h-6 w-6 text-green-600 ml-10 mt-20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
</div>
</div>
</label>
<div class="info_icon oil_info_icon absolute bottom-0" data-id="Rosehip Oil">
<div class="flex justify-center transform -translate-y-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white mt-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<!-- <span class="absolute inline-flex items-center p-2 rounded-full text-xs font-medium bg-black text-white mb-2 hidden"> </span> -->
<span class="absolute text-xs sm:text-sm font-medium text-white bottom-0 mt-2"> Smooth </span>
</div>
</div>
<div class="flex justify-center mt-5 mb-5 remove_preview_oil_btn hidden">
<span class="">
<button type="button" class=" border border-red-600 rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">Remove from cart</button>
</span>
</div>
</fieldset>
</div>
我正在尝试将文本环绕成圆形，我已完成所有操作，但文本被信息图标弄乱了。我需要的是将文本稍微放在圆圈的底部，以便文本能够响应。
我附上了屏幕截图和 Tailwind Play link。
Here is the Output:
https://play.tailwindcss.com/bOKYfNPjxF
It should be look like this:
<style>
.svg {
fill: currentColor;
height: auto;
max-width: 66vmin;
transform-origin: center;
width: 135px;
}
</style>
<div class="text-black">
<fieldset>
<div class="bg-gray-200 p-4 mt-2 items-center flex grid grid-cols-5 gap-x-4 gap-y-8 sm:grid-cols-5 sm:gap-x-6 lg:grid-cols-5 xl:gap-x-8" style="background-color: rgba(255,255,255,.08);">
<!--new -->
<div class="relative h-full flex justify-center items-center">
<label data-id="Rosehip Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500">
<svg class="svg absolute" viewBox="0 0 100 100" width="100" height="100">
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text font-size="10">
<textPath xlink:href="#circle" class="text-black versailles">
Recommendation based on your skin goals
</textPath>
</text>
</svg>
<span aria-hidden="true" class="oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full">
<img src="https://selection-app.netlify.app/assets/thumbnails/Marula-Oil.png" class="rounded-full" alt="">
</span>
<input type="radio" name="default_oil" data-title="Argan Oil" data-id="default_oil" value="Argan Oil_10" class="sr-only">
<div class="oil_label_checked_icon absolute inset-x-0 top-0 transform translate-y-px hidden">
<div class="flex justify-center transform -translate-y-1/2">
<svg class=" h-6 w-6 text-green-600 ml-10 mt-20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
</div>
</div>
</label>
<div class="info_icon oil_info_icon absolute bottom-0" data-id="Rosehip Oil">
<div class="flex justify-center transform -translate-y-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white mt-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<!-- <span class="absolute inline-flex items-center p-2 rounded-full text-xs font-medium bg-black text-white mb-2 hidden"> </span> -->
<span class="absolute text-xs sm:text-sm font-medium text-white bottom-0 mt-2"> Smooth </span>
</div>
</div>
<div class="flex justify-center mt-5 mb-5 remove_preview_oil_btn hidden">
<span class="">
<button type="button" class=" border border-red-600 rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">Remove from cart</button>
</span>
</div>
</fieldset>
</div>
将 style="transform: rotate(-55deg); transform-origin: center;" 添加到您的 SVG 文本似乎有效：
.svg {
fill: currentColor;
height: auto;
max-width: 66vmin;
transform-origin: center;
width: 135px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="text-black">
<fieldset>
<div class="bg-gray-200 p-4 mt-2 items-center flex grid grid-cols-5 gap-x-4 gap-y-8 sm:grid-cols-5 sm:gap-x-6 lg:grid-cols-5 xl:gap-x-8" style="background-color: rgba(255,255,255,.08);">
<!--new -->
<div class="relative h-full flex justify-center items-center">
<label data-id="Rosehip Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500">
<svg class="svg absolute" viewBox="0 0 100 100" width="100" height="100">
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text font-size="10" style="transform: rotate(-55deg); transform-origin: center;">
<textPath xlink:href="#circle" class="text-black versailles">
Recommendation based on your skin goals
</textPath>
</text>
</svg>
<span aria-hidden="true" class="oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full">
<img src="https://selection-app.netlify.app/assets/thumbnails/Marula-Oil.png" class="rounded-full" alt="">
</span>
<input type="radio" name="default_oil" data-title="Argan Oil" data-id="default_oil" value="Argan Oil_10" class="sr-only">
<div class="oil_label_checked_icon absolute inset-x-0 top-0 transform translate-y-px hidden">
<div class="flex justify-center transform -translate-y-1/2">
<svg class=" h-6 w-6 text-green-600 ml-10 mt-20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
</div>
</div>
</label>
<div class="info_icon oil_info_icon absolute bottom-0" data-id="Rosehip Oil">
<div class="flex justify-center transform -translate-y-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white mt-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<!-- <span class="absolute inline-flex items-center p-2 rounded-full text-xs font-medium bg-black text-white mb-2 hidden"> </span> -->
<span class="absolute text-xs sm:text-sm font-medium text-white bottom-0 mt-2"> Smooth </span>
</div>
</div>
<div class="flex justify-center mt-5 mb-5 remove_preview_oil_btn hidden">
<span class="">
<button type="button" class=" border border-red-600 rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">Remove from cart</button>
</span>
</div>
</fieldset>
</div>