html - 如何在 SVG 中制作“弯曲矩形”?
问题描述
我有一个正在做的项目,需要我使用看起来像下图所示钢铁侠周围的条形的按钮进行圆形导航。我可以绘制简单的形状并很好地遵循教程,但是我不知道如何用弯曲的形状绘制这些条,如下图所示。
我已经包含了一个剪辑路径示例,但我认为 SVG 是我需要做的。
HTML
<div class="button"></div>
CSS
.button {
background: radial-gradient(circle at 50% 160%,transparent 45%,red 44.5%,red 85%,transparent 85%);
-webkit-clip-path: polygon(5% 0, 100% 0, 65% 90%, 35% 90%);
clip-path: polygon(20% 0, 80% 0, 65% 90%, 35% 90%);
}
解决方案
首先,我正在创建一个段(路径)。然后我通过旋转它来重用它。
const SVG_NS = 'http://www.w3.org/2000/svg';
const SVG_XLINK = "http://www.w3.org/1999/xlink";
const deg = 180 / Math.PI;
let R = 50;// the outer radius
let r = 35;// the inner radius
let A = 2*Math.PI/7;// the angle for the segment + space
let a = 2*A/3; // the angle for the segment
let path = document.createElementNS(SVG_NS, 'path');
let p1 = {x:0,y:-R}
let p2 = {
x : R*Math.cos(a - Math.PI/2),
y : R*Math.sin(a - Math.PI/2)
}
let p3 = {
x : r*Math.cos(a - Math.PI/2),
y : r*Math.sin(a - Math.PI/2)
}
let p4 = {
x : 0,
y : -r
}
let d = `M${p1.x},${p1.y}
A${R},${R} 0 0,1,${p2.x},${p2.y}
L${p3.x},${p3.y}
A${r},${r} 0 0,0,${p4.x},${p4.y}
L${p1.x},${p1.y}Z
`;
path.setAttributeNS(null, "d", d);
path.setAttributeNS(null, "id", "arc");
defs.appendChild(path);
for(let i = 0; i < 7; i++){
let use = document.createElementNS(SVG_NS, 'use');
use.setAttributeNS(SVG_XLINK, "xlink:href", "#arc")
use.setAttributeNS(null, "fill", "gold");
use.setAttributeNS(null, "transform", `rotate(${i*A*deg})`);
svg.appendChild(use);
}
<svg id="svg" viewBox= "-100 -55 200 110">
<defs id="defs"></defs>
<circle r="25" fill="gold" />
</svg>
或者更简单:这次我正在使用stroke-dasharray
,我正在计算笔划和间隙的大小
const SVG_NS = 'http://www.w3.org/2000/svg';
let R = 40;
let perimeter = 2*Math.PI*R
let dash = .7*perimeter/7;
let gap = .3*perimeter/7;
let dasharray = document.createElementNS(SVG_NS, 'circle');
dasharray.setAttributeNS(null, "r", R);
dasharray.setAttributeNS(null, "stroke-dasharray", `${dash}, ${gap}`);
svg.appendChild(dasharray);
circle{stroke-width:20px; stroke:black;fill:none;}
<svg id="svg" viewBox= "-100 -55 200 110"></svg>
推荐阅读
- nonlinear-optimization - GEKKO 可以处理哪些类型的非线性?
- javascript - Node/Axios - 函数返回 axios 对路由的响应
- javascript - 捕获 chrome.runtime.lastError 时如何记录错误的行号?
- r - 在 dplyr 中按类别计算每日订单
- swift - SwiftUI NavigationView 推送视图而无需其他视图
- laravel - 即使 APP_DEBUG 设置为 false,Laravel 也会显示 Symfony 样式的异常
- javascript - Discord.js 得到 motd
- java - 在没有对象或类名的java中调用方法
- flutter - 当前的 Dart SDK 版本是 2.10.4。如何将版本更改为更高版本。?在测试版或开发者频道中
- google-cloud-pubsub - CDAP PUBSUB 实时管道 MAP 数据类型