- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我需要创建一个 30 点的 SVG 圆并在中心显示当前小时数。
我已经有半圈了,但我不知道如何完成它。
编码:
<svg version="1.1" width="140px" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 49.35 23.93" style="enable-background:new 0 0 49.35 23.93;" xml:space="preserve">
<style type="text/css">
.st0{fill:#000;}
.st1{font-family:'ArboriaBook';}
.st2{font-size:12px;}
</style>
<g>
<path class="st0" d="M1.96,23.43c-0.44-0.06-0.71-0.39-0.66-0.81c0.05-0.42,0.4-0.66,0.84-0.61c0.43,0.05,0.72,0.37,0.66,0.81
C2.74,23.24,2.39,23.48,1.96,23.43z"></path>
<path class="st0" d="M2.9,18.83c-0.42-0.15-0.62-0.53-0.48-0.93c0.14-0.4,0.53-0.57,0.95-0.42c0.41,0.14,0.62,0.51,0.48,0.93
C3.71,18.8,3.31,18.97,2.9,18.83z"></path>
<path class="st0" d="M4.77,14.52c-0.38-0.23-0.5-0.65-0.28-1.01c0.21-0.36,0.63-0.45,1.01-0.22c0.37,0.22,0.51,0.62,0.28,1.01
C5.57,14.66,5.14,14.74,4.77,14.52z"></path>
<path class="st0" d="M7.47,10.69c-0.33-0.3-0.35-0.73-0.07-1.04c0.28-0.31,0.71-0.31,1.04-0.01c0.32,0.29,0.37,0.71,0.07,1.04
C8.22,10.99,7.79,10.98,7.47,10.69z"></path>
<path class="st0" d="M10.9,7.48c-0.26-0.36-0.2-0.79,0.14-1.03c0.34-0.24,0.76-0.16,1.02,0.2c0.25,0.35,0.22,0.77-0.14,1.03
C11.58,7.92,11.15,7.83,10.9,7.48z"></path>
<path class="st0" d="M14.92,5.02c-0.18-0.41-0.03-0.81,0.35-0.98c0.38-0.17,0.77,0,0.95,0.4c0.18,0.39,0.05,0.8-0.35,0.98
C15.49,5.6,15.09,5.42,14.92,5.02z"></path>
<path class="st0" d="M19.32,3.46c-0.09-0.43,0.13-0.8,0.54-0.89s0.76,0.16,0.85,0.59c0.09,0.42-0.11,0.8-0.54,0.89
C19.76,4.13,19.41,3.88,19.32,3.46z"></path>
<path class="st0" d="M23.94,2.82c0-0.44,0.29-0.76,0.71-0.76c0.42,0,0.71,0.3,0.72,0.75c0,0.43-0.27,0.76-0.71,0.76
C24.24,3.57,23.95,3.25,23.94,2.82z"></path>
<path class="st0" d="M28.66,3.13c0.09-0.44,0.44-0.68,0.85-0.6s0.63,0.44,0.55,0.88c-0.08,0.42-0.42,0.69-0.85,0.6
C28.8,3.93,28.58,3.55,28.66,3.13z"></path>
<path class="st0" d="M33.18,4.39c0.17-0.41,0.57-0.58,0.96-0.42c0.39,0.17,0.53,0.56,0.36,0.97c-0.17,0.4-0.55,0.59-0.96,0.42
C33.15,5.2,33.01,4.79,33.18,4.39z"></path>
<path class="st0" d="M37.33,6.54c0.25-0.37,0.68-0.45,1.02-0.21c0.35,0.24,0.4,0.66,0.15,1.02c-0.25,0.35-0.66,0.46-1.02,0.21
C37.14,7.32,37.08,6.89,37.33,6.54z"></path>
<path class="st0" d="M40.98,9.51c0.32-0.31,0.75-0.3,1.04,0s0.26,0.73-0.06,1.03c-0.31,0.3-0.74,0.32-1.04,0
C40.63,10.24,40.67,9.8,40.98,9.51z"></path>
<path class="st0" d="M43.94,13.13c0.38-0.23,0.8-0.14,1.02,0.21c0.22,0.36,0.11,0.77-0.27,1c-0.37,0.23-0.79,0.16-1.02-0.21
C43.45,13.77,43.57,13.36,43.94,13.13z"></path>
<path class="st0" d="M46.11,17.28c0.42-0.15,0.81,0.02,0.96,0.42s-0.05,0.77-0.47,0.92c-0.41,0.15-0.81,0-0.96-0.42
C45.5,17.81,45.7,17.43,46.11,17.28z"></path>
<path class="st0" d="M47.38,21.82c0.44-0.06,0.79,0.19,0.85,0.61c0.06,0.42-0.21,0.75-0.65,0.81c-0.43,0.06-0.79-0.17-0.85-0.61
C46.68,22.22,46.96,21.88,47.38,21.82z"></path>
</g>
<text id="current_time" transform="matrix(1 0 0 1 11.2994 20.3894)" class="st0 st1 st2">09:54</text>
</svg>
最佳答案
您可以只创建一个点,并使用 <use>
多次重复使用它并使用 basic trigonometry 给他们正确的坐标
然后在中心添加文本(0,0)
同时使用 text-anchor="middle"
和 alignment-baseline="middle"
svg {
width: 160px;
}
<svg viewBox="-52 -52 104 104" xmlns="http://www.w3.org/2000/svg">
<!-- radius (r) of outer circle is 50, center is (0,0) -->
<style>
circle, text { fill: #9bc }
text { font-family: system-ui; }
</style>
<!-- basic shape -->
<defs>
<circle r="2" id="dot"/>
</defs>
<!-- x = r * sin(-90), y = r * cos(-90) -->
<use xlink:href="#dot" x="-50" y="0" />
<!-- x = r * sin(-78), y = r * cos(-78) -->
<use xlink:href="#dot" x="-48.907" y="-10.39" />
<!-- x = r * sin(-66), y = r * cos(-66) -->
<use xlink:href="#dot" x="-45.677" y="-20.33" />
<!-- continue by increasing the angle of 12° for
the remaining 27 points, up to 270°
-->
<use xlink:href="#dot" x="-40.451" y="-29.389" />
<use xlink:href="#dot" x="-33.457" y="-37.157" />
<use xlink:href="#dot" x="-25.000" y="-43.301" />
<use xlink:href="#dot" x="-15.451" y="-47.553" />
<use xlink:href="#dot" x="-5.226" y="-49.726" />
<use xlink:href="#dot" x="5.226" y="-49.726" />
<use xlink:href="#dot" x="15.451" y="-47.553" />
<use xlink:href="#dot" x="25.000" y="-43.301" />
<use xlink:href="#dot" x="33.457" y="-37.157" />
<use xlink:href="#dot" x="40.451" y="-29.389" />
<use xlink:href="#dot" x="45.677" y="-20.337" />
<use xlink:href="#dot" x="48.907" y="-10.396" />
<use xlink:href="#dot" x="50.000" y="0" />
<use xlink:href="#dot" x="48.907" y="10.396" />
<use xlink:href="#dot" x="45.677" y="20.337" />
<use xlink:href="#dot" x="40.451" y="29.389" />
<use xlink:href="#dot" x="33.457" y="37.157" />
<use xlink:href="#dot" x="25.000" y="43.301" />
<use xlink:href="#dot" x="15.451" y="47.553" />
<use xlink:href="#dot" x="5.226" y="49.726" />
<use xlink:href="#dot" x="-5.226" y="49.726" />
<use xlink:href="#dot" x="-15.451" y="47.553" />
<use xlink:href="#dot" x="-25.000" y="43.301" />
<use xlink:href="#dot" x="-33.457" y="37.157" />
<use xlink:href="#dot" x="-40.451" y="29.389" />
<use xlink:href="#dot" x="-45.677" y="20.337" />
<use xlink:href="#dot" x="-48.907" y="10.396" />
<text text-anchor="middle" alignment-baseline="middle"
x="0" y="0">12:34</text>
</svg>
var useNodes ="";
for (i = -90; i < 270; i = i + 12) {
var angle = Math.abs(i) * (Math.PI / 180);
var x = (Math.sin(angle) * 50).toFixed(3);
var y = (Math.cos(angle) * 50).toFixed(3);
useNodes +='<use xlink:href="#dot" x="'+ x + '" y="'+ y +'" />\n'
}
console.log(useNodes);
关于css - 用几个点创建SVG圆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68190645/
前言: 有时候,一个数据库有多个帐号,包括数据库管理员,开发人员,运维支撑人员等,可能有很多帐号都有比较大的权限,例如DDL操作权限(创建,修改,删除存储过程,创建,修改,删除表等),账户多了,管理
所以我用 Create React App 创建并设置了一个大型 React 应用程序。最近我们开始使用 Storybook 来处理和创建组件。它很棒。但是,当我们尝试运行或构建应用程序时,我们不断遇
遵循我正在创建的控件的代码片段。这个控件用在不同的地方,变量也不同。 我正在尝试编写指令来清理代码,但在 {{}} 附近插入值时出现解析错误。 刚接触 Angular ,无法确定我错过了什么。请帮忙。
我正在尝试创建一个 image/jpeg jax-rs 提供程序类,它为我的基于 post rest 的 Web 服务创建一个图像。我无法制定请求来测试以下内容,最简单的测试方法是什么? @POST
我一直在 Windows 10 的模拟器中练习 c。后来我改用dev C++ IDE。当我在 C 中使用 FILE 时。创建的文件的名称为 test.txt ,而我给出了其他名称。请帮助解决它。 下面
当我们创建自定义 View 时,我们将 View 文件的所有者设置为自定义类,并使用 initWithFrame 或 initWithCode 对其进行实例化。 当我们创建 customUITable
我正在尝试为函数 * Producer 创建一个线程,但用于创建线程的行显示错误。我为这句话加了星标,但我无法弄清楚它出了什么问题...... #include #include #include
今天在做项目时,遇到了需要创建JavaScript对象的情况。所以Bing了一篇老外写的关于3种创建JavaScript对象的文章,看后跟着打了一遍代码。感觉方法挺好的,在这里与大家分享一下。 &
我正在阅读将查询字符串传递给 Amazon 的 S3 以进行身份验证的文档,但似乎无法理解 StringToSign 的创建和使用方式。我正在寻找一个具体示例来说明 (1) 如何构造 String
前言:我对 C# 中任务的底层实现不太了解,只了解它们的用法。为我在下面屠宰的任何东西道歉: 对于“我怎样才能开始一项任务但不等待它?”这个问题,我找不到一个好的答案。在 C# 中。更具体地说,即使任
我有一个由一些复杂的表达式生成的 ILookup。假设这是按姓氏查找人。 (在我们简单的世界模型中,姓氏在家庭中是唯一的) ILookup families; 现在我有两个对如何构建感兴趣的查询。 首
我试图创建一个 MSI,其中包含 和 exe。在 WIX 中使用了捆绑选项。这样做时出错。有人可以帮我解决这个问题。下面是代码: 错误 error LGH
在 Yii 中,Create 和 Update 通常使用相同的形式。因此,如果我在创建期间有电子邮件、密码、...other_fields...等字段,但我不想在更新期间专门显示电子邮件和密码字段,但
上周我一直在努力创建一个给定一行和一列的 QModelIndex。 或者,我会满足于在已经存在的 QModelIndex 中更改 row() 的值。 任何帮助,将不胜感激。 编辑: QModelInd
出于某种原因,这不起作用: const char * str_reset_command = "\r\nReset"; const char * str_config_command = "\r\nC
现在,我有以下由 original.df %.% group_by(Category) %.% tally() %.% arrange(desc(n)) 创建的 data.frame。 DF 5),
在今天之前,我使用/etc/vim/vimrc来配置我的vim设置。今天,我想到了创建.vimrc文件。所以,我用 touch .vimrc cat /etc/vim/vimrc > .vimrc 所
我可以创建一个 MKAnnotation,还是只读的?我有坐标,但我发现使用 setCooperative 手动创建 MKAnnotation 并不容易。 想法? 最佳答案 MKAnnotation
在以下代码中,第一个日志语句按预期显示小数,但第二个日志语句记录 NULL。我做错了什么? NSDictionary *entry = [[NSDictionary alloc] initWithOb
我正在使用与此类似的代码动态添加到数组; $arrayF[$f+1][$y][$x+1] = $value+1; 但是我在错误报告中收到了这个: undefined offset :1 问题:尝试创
我是一名优秀的程序员,十分优秀!