2020年1月3日 13:39:06go评论69阅读模式

英文:

Equally divide paths in svg speedometer

问题

在以下SVG中，如何均匀分布10个路径，以便每个路径等于5个单位，从而可以显示最高值为50。

这是fiddle链接: https://jsfiddle.net/9dfgvhkj/

代码：

<svg id="gaugeSpeedSvg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="width: 350px; height: 350px; background:white; border-radius: 50%; 
box-shadow: rgba(21, 55, 172, 0.25) 0px 0px 32px, rgb(10, 220, 30) 0px -192px 192px -240px inset, rgb(10, 220, 30) 0px 0px 2px -1px inset;" xml:space="preserve">
    <path style="fill: rgb(227, 18, 18); display: block;" d="M12.9,75.5c0.3,0.5,0.7,0.9,1,1.4l7.6-5.7c-0.3-0.4-0.5-0.7-0.8-1.1L12.9,75.5z"></path>
    <path style="fill: rgb(241, 45, 96); display: block;" d="M6.7,62.4C6.9,62.9,7,63.5,7.2,64l9.1-3c-0.1-0.4-0.3-0.8-0.4-1.2L6.7,62.4z"></path>
    <path style="fill: rgb(255, 75, 168); display: block;" d="M5,47.9c0,0.6,0,1.1,0,1.7l9.5,0.1c0-0.5,0-0.9,0-1.4L5,47.9z"></path>
    <path style="fill: rgb(247, 50, 191); display: block;" d="M8,33.7c-0.2,0.5-0.4,1.1-0.6,1.6l9,3.1c0.1-0.4,0.3-0.9,0.5-1.3L8,33.7z"></path>
    <path style="fill: rgb(238, 26, 220); display: block;" d="M15.5,21.2c-0.4,0.4-0.8,0.9-1.1,1.3l7.5,5.8c0.3-0.4,0.6-0.7,0.9-1.1L15.5,21.2z"></path>
    <path style="fill: rgb(102, 24, 205); display: block;" d="M26.4,11.7c-0.5,0.3-0.9,0.6-1.4,0.9l5.3,7.9c0.3-0.2,0.7-0.5,1-0.7L26.4,11.7z"></path>
    <path style="fill: rgb(21, 55, 172); display: block;" d="M39.9,6.1c-0.5,0.1-1.1,0.3-1.6,0.4l2.5,9.2c0.4-0.1,0.8-0.2,1.2-0.3L39.9,6.1z"></path>
    <path style="fill: rgb(44, 144, 213); display: block;" d="M54.5,5.2c-0.6,0-1.1-0.1-1.7-0.1l-0.6,9.5c0.4,0,0.9,0.1,1.3,0.1L54.5,5.2z"></path>
    <path style="fill: rgb(75, 247, 255); display: block;" d="M68.6,9C68,8.7,67.5,8.5,67,8.3l-3.6,8.8c0.4,0.2,0.8,0.3,1.2,0.5L68.6,9z"></path>
    <path style="fill: rgb(40, 237, 153); display: block;" d="M80.6,17c-0.5-0.4-0.9-0.7-1.3-1.1l-6.2,7.2c0.3,0.3,0.7,0.6,1,0.9L80.6,17z"></path>
    <path style="fill: rgb(10, 220, 30); display: block;" d="M89.6,28.6c-0.2-0.5-0.5-1-0.8-1.5L80.6,32c0.2,0.4,0.4,0.7,0.6,1.1L89.6,28.6z"></path>
    <path style="fill: rgb(10, 220, 30); display: block;" d="M94.4,42.2c-0.1-0.5-0.2-1.1-0.3-1.6l-9.4,2c0.1,0.4,0.2,0.9,0.2,1.3L94.4,42.2z"></path>
    <path style="fill: rgb(10, 220, 30); display: block;" d="M94.5,56.8c0.1-0.5,0.1-1.1,0.2-1.7l-9.4-1c-0.1,0.4-0.1,0.9-0.2,1.3L94.5,56.8z"></path>
    <path style="fill: rgb(10, 220, 30); display: block;" d="M89.9,80.1c0.5-0.7,1-1.3,1.4-1.9l-12-8

<details>
<summary>英文:</summary>

How do I distribute 10 paths equally around the circle in the following svg so that I can show value upto 50 with each path being equal to 5 units.

Here is the fiddle: https://jsfiddle.net/9dfgvhkj/

The code:

    &lt;svg id=&quot;gaugeSpeedSvg&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 100 100&quot; style=&quot;width: 350px; height: 350px; background:white; border-radius: 50%; 
                                        box-shadow: rgba(21, 55, 172, 0.25) 0px 0px 32px, rgb(10, 220, 30) 0px -192px 192px -240px inset, rgb(10, 220, 30) 0px 0px 2px -1px inset;&quot; xml:space=&quot;preserve&quot;&gt;
                                        &lt;path style=&quot;fill: rgb(227, 18, 18); display: block;&quot; d=&quot;M12.9,75.5c0.3,0.5,0.7,0.9,1,1.4l7.6-5.7c-0.3-0.4-0.5-0.7-0.8-1.1L12.9,75.5z&quot;&gt;&lt;/path&gt;
                                        
                                        &lt;path style=&quot;fill: rgb(241, 45, 96); display: block;&quot; d=&quot;M6.7,62.4C6.9,62.9,7,63.5,7.2,64l9.1-3c-0.1-0.4-0.3-0.8-0.4-1.2L6.7,62.4z&quot;&gt;&lt;/path&gt;
                                        
                                        &lt;path style=&quot;fill: rgb(255, 75, 168); display: block;&quot; d=&quot;M5,47.9c0,0.6,0,1.1,0,1.7l9.5,0.1c0-0.5,0-0.9,0-1.4L5,47.9z&quot;&gt;&lt;/path&gt;
                                        
                                        &lt;path style=&quot;fill: rgb(247, 50, 191); display: block;&quot; d=&quot;M8,33.7c-0.2,0.5-0.4,1.1-0.6,1.6l9,3.1c0.1-0.4,0.3-0.9,0.5-1.3L8,33.7z&quot;&gt;&lt;/path&gt;
                                        
                                        &lt;path style=&quot;fill: rgb(238, 26, 220); display: block;&quot; d=&quot;M15.5,21.2c-0.4,0.4-0.8,0.9-1.1,1.3l7.5,5.8c0.3-0.4,0.6-0.7,0.9-1.1L15.5,21.2z&quot;&gt;&lt;/path&gt;
                                        
                                        &lt;path style=&quot;fill: rgb(102, 24, 205); display: block;&quot; d=&quot;M26.4,11.7c-0.5,0.3-0.9,0.6-1.4,0.9l5.3,7.9c0.3-0.2,0.7-0.5,1-0.7L26.4,11.7z&quot;&gt;&lt;/path&gt;
                                        
                                        &lt;path style=&quot;fill: rgb(21, 55, 172); display: block;&quot; d=&quot;M39.9,6.1c-0.5,0.1-1.1,0.3-1.6,0.4l2.5,9.2c0.4-0.1,0.8-0.2,1.2-0.3L39.9,6.1z&quot;&gt;&lt;/path&gt;
                                        
                                        &lt;path style=&quot;fill: rgb(44, 144, 213); display: block;&quot; d=&quot;M54.5,5.2c-0.6,0-1.1-0.1-1.7-0.1l-0.6,9.5c0.4,0,0.9,0.1,1.3,0.1L54.5,5.2z&quot;&gt;&lt;/path&gt;
                                        
                                        &lt;path style=&quot;fill: rgb(75, 247, 255); display: block;&quot; d=&quot;M68.6,9C68,8.7,67.5,8.5,67,8.3l-3.6,8.8c0.4,0.2,0.8,0.3,1.2,0.5L68.6,9z&quot;&gt;&lt;/path&gt;
                                        
                                        &lt;path style=&quot;fill: rgb(40, 237, 153); display: block;&quot; d=&quot;M80.6,17c-0.5-0.4-0.9-0.7-1.3-1.1l-6.2,7.2c0.3,0.3,0.7,0.6,1,0.9L80.6,17z&quot;&gt;&lt;/path&gt;
                                        
                                        &lt;path style=&quot;fill: rgb(10, 220, 30); display: block;&quot; d=&quot;M89.6,28.6c-0.2-0.5-0.5-1-0.8-1.5L80.6,32c0.2,0.4,0.4,0.7,0.6,1.1L89.6,28.6z&quot;&gt;&lt;/path&gt;
                                        
                                        &lt;path style=&quot;fill: rgb(10, 220, 30); display: block;&quot; d=&quot;M94.4,42.2c-0.1-0.5-0.2-1.1-0.3-1.6l-9.4,2c0.1,0.4,0.2,0.9,0.2,1.3L94.4,42.2z&quot;&gt;&lt;/path&gt;
                                        
                                        &lt;path style=&quot;fill: rgb(10, 220, 30); display: block;&quot; d=&quot;M94.5,56.8c0.1-0.5,0.1-1.1,0.2-1.7l-9.4-1c-0.1,0.4-0.1,0.9-0.2,1.3L94.5,56.8z&quot;&gt;&lt;/path&gt;
                                        
                                        
                                        &lt;path style=&quot;fill: rgb(10, 220, 30); display: block;&quot; d=&quot;M89.9,80.1c0.5-0.7,1-1.3,1.4-1.9l-12-8.2c-0.3,0.4-0.6,0.9-0.9,1.3L89.9,80.1z&quot;&gt;&lt;/path&gt;
                                    &lt;/svg&gt;

</details>


# 答案1
**得分**: 0

以下是翻译的部分：

首先，让我指出，作为一条信息，`display: block` 在 SVG 中基本上没有意义。这是一个HTML概念。

无论如何，来解决您的问题。最简单的方法是定义速度表的一个刻度标记，然后使用旋转变换将它们分布在规律的间隔上。

您的速度表范围似乎覆盖了圆的不到3/4（270度）的周长。因此，让我们选择一个范围为250度，以简化问题。

让我们首先定义要重复使用的初始刻度标记。为了简单起见，我们将定义一个垂直上下居中的刻度标记。

```html
<svg id="gaugeSpeedSvg" viewBox="0 0 100 100">
   <path id="initial" d="M 49,5 L 51,5 L 50.65,14.5, L 49.35,14.5 Z"></path>
</svg>

接下来，我们可以使用<use>元素来创建具有不同旋转角度的刻度标记的副本。旋转变换的变体将是：

transform="rotate(25, 50,50)"

这里的25表示25度的旋转。这是因为我们想将250度的速度范围分成10个部分。50,50部分是我们要使用的旋转中心点。（50,50）是viewBox的中心点，也是SVG的中心点。

最后一步是添加您想要的颜色。假设您希望与原始SVG中的颜色相同。

请注意，在此版本中，我们必须将“initial”刻度分离为一个定义。然后，使用该定义来为所有11个显示的刻度标记指定颜色。这是因为如果我们给初始刻度标记指定颜色，那么我们将无法为<use>元素指定任何其他颜色。初始刻度标记上的颜色将覆盖我们在<use>元素上指定的任何其他颜色。

<svg id="gaugeSpeedSvg" viewBox="0 0 100 100">
   <defs>
      <path id="initial" d="M 49,5 L 51,5 L 50.65,14.5, L 49.35,14.5 Z"/>
   </defs>

   <use xlink:href="#initial" transform="rotate(-125, 50,50)" style="fill: rgb(227, 18, 18);"/>
   <!-- 其他刻度标记 -->
</svg>

希望这对您有所帮助。如果您有其他问题，请随时提出。

英文:

First let me point out, as an FYI, that display: block is basically meaningless in SVG. That is an HTML concept.

Anyway, to your problem. The simplest way is to define one tick/mark of your speedo, then use rotation transforms to distribute them at regular intervals.

Your speedo range seems to cover a bit less than 3/4 of the circumference of your circle (270 degrees). So let's go for for a range of 250 degrees to make things simple.

So lets start by defining the initial tick mark that we are going to re-use. For simplicity, we'll define the middle one that is straight up and down vertically.

svg {
width: 350px;
height: 350px;
background:white;
border-radius: 50%;
box-shadow: rgba(21, 55, 172, 0.25) 0px 0px 32px, rgb(10, 220, 30) 0px -192px 192px -240px inset, rgb(10, 220, 30) 0px 0px 2px -1px inset;
}

&lt;svg id=&quot;gaugeSpeedSvg&quot; viewBox=&quot;0 0 100 100&quot;&gt;
&lt;path id=&quot;initial&quot; d=&quot;M 49,5 L 51,5 L 50.65,14.5, L 49.35,14.5 Z&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;

Next we can use the <use> element to make copies of that tick shape with varying amounts of rotation applied. The rotation transform will be variants of:

transform=&quot;rotate(25, 50,50)`

The 25 means 25 degrees rotation. That's because we want to divide the 250 degrees speedo range into 10 divisions. The 50,50 part is the centre of rotation we want to use. (50,50) is the centre of the viewBox - which is the centre of the SVG.

svg {
width: 350px;
height: 350px;
background:white;
border-radius: 50%;
box-shadow: rgba(21, 55, 172, 0.25) 0px 0px 32px, rgb(10, 220, 30) 0px -192px 192px -240px inset, rgb(10, 220, 30) 0px 0px 2px -1px inset;
}

&lt;svg id=&quot;gaugeSpeedSvg&quot; viewBox=&quot;0 0 100 100&quot;&gt;
&lt;use xlink:href=&quot;#initial&quot; transform=&quot;rotate(-125, 50,50)&quot;/&gt;
&lt;use xlink:href=&quot;#initial&quot; transform=&quot;rotate(-100, 50,50)&quot;/&gt;
&lt;use xlink:href=&quot;#initial&quot; transform=&quot;rotate(-75, 50,50)&quot;/&gt;
&lt;use xlink:href=&quot;#initial&quot; transform=&quot;rotate(-50, 50,50)&quot;/&gt;
&lt;use xlink:href=&quot;#initial&quot; transform=&quot;rotate(-25, 50,50)&quot;/&gt;
&lt;path id=&quot;initial&quot; d=&quot;M 49,5 L 51,5 L 50.65,14.5, L 49.35,14.5 Z&quot;&gt;&lt;/path&gt;
&lt;use xlink:href=&quot;#initial&quot; transform=&quot;rotate(25, 50,50)&quot;/&gt;
&lt;use xlink:href=&quot;#initial&quot; transform=&quot;rotate(50, 50,50)&quot;/&gt;
&lt;use xlink:href=&quot;#initial&quot; transform=&quot;rotate(75, 50,50)&quot;/&gt;
&lt;use xlink:href=&quot;#initial&quot; transform=&quot;rotate(100, 50,50)&quot;/&gt;
&lt;use xlink:href=&quot;#initial&quot; transform=&quot;rotate(125, 50,50)&quot;/&gt;
&lt;/svg&gt;

The final step is to add the colours you want. Assuming you want the same ones as in your original SVG.

Note that in this version, we have to separate out the "initial" tick as a definition. Then use that definition for all 11 displayed ticks. That is because if we gave that one a colour, then we wouldn't be able to give the copies individual colours. The colour on the initial one would have over-ridden any other colour we specified on the <use> elements.

svg {
width: 350px;
height: 350px;
background:white;
border-radius: 50%;
box-shadow: rgba(21, 55, 172, 0.25) 0px 0px 32px, rgb(10, 220, 30) 0px -192px 192px -240px inset, rgb(10, 220, 30) 0px 0px 2px -1px inset;
}

&lt;svg id=&quot;gaugeSpeedSvg&quot; viewBox=&quot;0 0 100 100&quot;&gt;
&lt;defs&gt;
&lt;path id=&quot;initial&quot; d=&quot;M 49,5 L 51,5 L 50.65,14.5, L 49.35,14.5 Z&quot;/&gt;
&lt;/defs&gt;
&lt;use xlink:href=&quot;#initial&quot; transform=&quot;rotate(-125, 50,50)&quot; style=&quot;fill: rgb(227, 18, 18);&quot;/&gt;
&lt;use xlink:href=&quot;#initial&quot; transform=&quot;rotate(-100, 50,50)&quot; style=&quot;fill: rgb(241, 45, 96);&quot;/&gt;
&lt;use xlink:href=&quot;#initial&quot; transform=&quot;rotate(-75, 50,50)&quot; style=&quot;fill: rgb(255, 75, 168);&quot;/&gt;
&lt;use xlink:href=&quot;#initial&quot; transform=&quot;rotate(-50, 50,50)&quot; style=&quot;fill: rgb(247, 50, 191);&quot;/&gt;
&lt;use xlink:href=&quot;#initial&quot; transform=&quot;rotate(-25, 50,50)&quot; style=&quot;fill: rgb(238, 26, 220);&quot;/&gt;
&lt;use xlink:href=&quot;#initial&quot; style=&quot;fill: rgb(102, 24, 205);&quot;/&gt;
&lt;use xlink:href=&quot;#initial&quot; transform=&quot;rotate(25, 50,50)&quot; style=&quot;fill: rgb(21, 55, 172);&quot;/&gt;
&lt;use xlink:href=&quot;#initial&quot; transform=&quot;rotate(50, 50,50)&quot; style=&quot;fill: rgb(44, 144, 213);&quot;/&gt;
&lt;use xlink:href=&quot;#initial&quot; transform=&quot;rotate(75, 50,50)&quot; style=&quot;fill: rgb(75, 247, 255);&quot;/&gt;
&lt;use xlink:href=&quot;#initial&quot; transform=&quot;rotate(100, 50,50)&quot; style=&quot;fill: rgb(40, 237, 153);&quot;/&gt;
&lt;use xlink:href=&quot;#initial&quot; transform=&quot;rotate(125, 50,50)&quot; style=&quot;fill: rgb(10, 220, 30);&quot;/&gt;
&lt;/svg&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

在SVG速度计中均匀分配路径。

问题

SVG类型在Flow.js中的支持？

创建新的对象数组，通过映射遍历对象列表和数组。

在本地存储中持续检查一个函数是否返回true。

如何通过JavaScript将原点移动到一个合理的位置？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论