那些遇到过的问题

如何正确旋转此SVG元素？

GBW*_*Dev 6 html css svg

我一直试图创建一个范围为0-100的量规。我已经在Sketch中创建了这个SVG元素，现在我正试图使旋转适用于黑针。

为此，我尝试了transform-origin和一起玩，transform: rotate()但是我似乎无法像看到的.gif那样使它旋转，因为它似乎总是被切断。我添加了一个JS范围滑块以方便您演示该问题。这也是一个可尝试的codepen。

您能帮我达到gif所示的预期结果吗？

在此处输入图片说明

$('#percent').on('change', function() {
  $('#needle').css('transform', 'translate(175px, 19px) rotate(' + percentToDegrees($(this).val()) + 'deg)')
})

function percentToDegrees(percent) {
  var degrees = -90;
  var inc = 1.8;
  return degrees += (percent * inc);
}
Run Code Online (Sandbox Code Playgroud) 
#needle {
  transform-origin: 0% bottom;
  transform: translate(175px, 19px) rotate(0);
}

input {
  display: block;
  margin: 50px auto;
}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="100%" height="177px" viewBox="0 0 385 177" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard" transform="translate(-15.000000, -224.000000)">
            <g id="Group" transform="translate(15.000000, 220.000000)">
                <g id="guage">
                    <path d="M84.8041871,178.856781 L84.8041871,179.169281 L25,179.169281 L25,178.669281 C25,119.519295 57.1931907,67.8894771 105.011512,40.3501901 L135,92.2989954 C105.009619,109.483749 84.8041871,141.810321 84.8041871,178.856781 Z" id="red" fill="#BD3632"></path>
                    <path d="M235.050803,92.4864742 C205.21439,75.1028089 167.169843,73.7652453 135.133157,92.2884751 L134.862916,92.4447251 L105,40.6455806 L105.432385,40.3955806 C156.58355,10.8205878 217.307001,12.8896752 265,40.5376689 L235.050803,92.4864742 L235.050803,92.4864742 Z" id="yellow" fill="#EEAF30"></path>
                    <path d="M235,92.2989954 L264.988488,40.3501901 C312.806809,67.8894771 345,119.519295 345,178.669281 L345,179.169281 L285.195813,179.169281 L285.195813,178.856781 C285.195813,141.810321 264.990381,109.483749 235,92.2989954 L235,92.2989954 Z" id="green" fill="#008542"></path>
                    <text id="100%" font-family="Omnes-Regular, Omnes" font-size="15" font-weight="normal" line-spacing="15" fill="#000000">
                        <tspan x="350" y="180">100%</tspan>
                    </text>
                    <text id="50%" font-family="Omnes-Regular, Omnes" font-size="15" font-weight="normal" fill="#000000">
                        <tspan x="171" y="14">50%</tspan>
                    </text>
                    <text id="0%" font-family="Omnes-Regular, Omnes" font-size="15" font-weight="normal" fill="#000000">
                        <tspan x="0" y="178">0%</tspan>
                    </text>
                </g>
                <g id="needle" transform="translate(175.000000, 19.000000)">
                    <polygon id="Triangle" fill="#3C3C3B" points="10 0 15 162 5 162"></polygon>
                </g>
            </g>
        </g>
    </g>
</svg>

<input type="range" id="percent" value="50" min="0" max="100">
Run Code Online (Sandbox Code Playgroud)

Tem*_*fif 5

考虑transform-box:fill-box;然后做原点bottom center并增加视点框以避免割伤。我也将旋转移动到了多边形，并将平移保留在g元素上。

$('#percent').on('change', function() {
  $('#triangle').css('transform', 'rotate(' + percentToDegrees($(this).val()) + 'deg)')
})

function percentToDegrees(percent) {
  var degrees = -90;
  var inc = 1.8;
  return degrees += (percent * inc);
}
Run Code Online (Sandbox Code Playgroud) 
#triangle {
  transform-origin:center bottom;
  transform-box:fill-box;
}

input {
  display: block;
  margin: 50px auto;
}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="100%" height="177px" viewBox="0 0 385 185" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard" transform="translate(-15.000000, -224.000000)">
            <g id="Group" transform="translate(15.000000, 220.000000)">
                <g id="guage">
                    <path d="M84.8041871,178.856781 L84.8041871,179.169281 L25,179.169281 L25,178.669281 C25,119.519295 57.1931907,67.8894771 105.011512,40.3501901 L135,92.2989954 C105.009619,109.483749 84.8041871,141.810321 84.8041871,178.856781 Z" id="red" fill="#BD3632"></path>
                    <path d="M235.050803,92.4864742 C205.21439,75.1028089 167.169843,73.7652453 135.133157,92.2884751 L134.862916,92.4447251 L105,40.6455806 L105.432385,40.3955806 C156.58355,10.8205878 217.307001,12.8896752 265,40.5376689 L235.050803,92.4864742 L235.050803,92.4864742 Z" id="yellow" fill="#EEAF30"></path>
                    <path d="M235,92.2989954 L264.988488,40.3501901 C312.806809,67.8894771 345,119.519295 345,178.669281 L345,179.169281 L285.195813,179.169281 L285.195813,178.856781 C285.195813,141.810321 264.990381,109.483749 235,92.2989954 L235,92.2989954 Z" id="green" fill="#008542"></path>
                    <text id="100%" font-family="Omnes-Regular, Omnes" font-size="15" font-weight="normal" line-spacing="15" fill="#000000">
                        <tspan x="350" y="180">100%</tspan>
                    </text>
                    <text id="50%" font-family="Omnes-Regular, Omnes" font-size="15" font-weight="normal" fill="#000000">
                        <tspan x="171" y="14">50%</tspan>
                    </text>
                    <text id="0%" font-family="Omnes-Regular, Omnes" font-size="15" font-weight="normal" fill="#000000">
                        <tspan x="0" y="178">0%</tspan>
                    </text>
                </g>
                <g id="needle" transform="translate(175.000000, 18.000000)">
                    <polygon id="triangle" fill="#3C3C3B" points="10 0 15 162 5 162"></polygon>
                </g>
            </g>
        </g>
    </g>
</svg>

<input type="range" id="percent" value="50" min="0" max="100">
Run Code Online (Sandbox Code Playgroud)

Kai*_*ido 5

最简单的方法可能是使用 SVG 完成所有操作，只需设置元素的transform属性而不是其 css style。

您只需要设置rotate(angle, origin_x, origin_y)SVG 变换方法的第二个和第三个值。

$('#percent').on('input', function() {
  $('#needle').attr('transform', 'translate(175, 19) ' +
    'rotate(' + percentToDegrees($(this).val()) + ', 10, 162)')
})

function percentToDegrees(percent) {
  var degrees = -90;
  var inc = 1.8;
  return degrees += (percent * inc);
}
Run Code Online (Sandbox Code Playgroud) 
input {
  display: block;
  margin: 50px auto;
}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="100%" height="177px" viewBox="0 0 385 177" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Artboard" transform="translate(-15.000000, -224.000000)">
      <g id="Group" transform="translate(15.000000, 220.000000)">
        <g id="guage">
          <path d="M84.8041871,178.856781 L84.8041871,179.169281 L25,179.169281 L25,178.669281 C25,119.519295 57.1931907,67.8894771 105.011512,40.3501901 L135,92.2989954 C105.009619,109.483749 84.8041871,141.810321 84.8041871,178.856781 Z" id="red" fill="#BD3632"></path>
          <path d="M235.050803,92.4864742 C205.21439,75.1028089 167.169843,73.7652453 135.133157,92.2884751 L134.862916,92.4447251 L105,40.6455806 L105.432385,40.3955806 C156.58355,10.8205878 217.307001,12.8896752 265,40.5376689 L235.050803,92.4864742 L235.050803,92.4864742 Z" id="yellow" fill="#EEAF30"></path>
          <path d="M235,92.2989954 L264.988488,40.3501901 C312.806809,67.8894771 345,119.519295 345,178.669281 L345,179.169281 L285.195813,179.169281 L285.195813,178.856781 C285.195813,141.810321 264.990381,109.483749 235,92.2989954 L235,92.2989954 Z" id="green" fill="#008542"></path>
          <text id="100%" font-family="Omnes-Regular, Omnes" font-size="15" font-weight="normal" line-spacing="15" fill="#000000">
            <tspan x="350" y="180">100%</tspan>
          </text>
          <text id="50%" font-family="Omnes-Regular, Omnes" font-size="15" font-weight="normal" fill="#000000">
            <tspan x="171" y="14">50%</tspan>
          </text>
          <text id="0%" font-family="Omnes-Regular, Omnes" font-size="15" font-weight="normal" fill="#000000">
            <tspan x="0" y="178">0%</tspan>
          </text>
        </g>
        <g id="needle" transform="translate(175.000000, 19.000000)">
            <polygon id="Triangle" fill="#3C3C3B" points="10 0 15 162 5 162"></polygon>
        </g>
      </g>
    </g>
  </g>
</svg>

<input type="range" id="percent" value="50" min="0" max="100">
Run Code Online (Sandbox Code Playgroud)

您甚至会在浏览器兼容性方面获胜 ;-)

请注意，这一切都可以简化为：

$('#percent').on('input', function() {
  $('#Triangle')
    .attr('transform', 'rotate(' + percentToDegrees($(this).val()) + ', 10, 162)')
})

function percentToDegrees(percent) {
  var degrees = -90;
  var inc = 1.8;
  return degrees += (percent * inc);
}
Run Code Online (Sandbox Code Playgroud) 
input {
  display: block;
  margin: 50px auto;
}
#Page-1 text {
  font-family: Omnes-Regular, Omnes;
  font-size: 15px;
  font-weight: normal;
  fill: #000;
}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="100%" height="177px" viewBox="0 0 385 177" version="1.1">
  <g id="Page-1" stroke="none" fill="none" transform="translate(0, -4)">
    <g id="guage">
      <path d="M84.8041871,178.856781 L84.8041871,179.169281 L25,179.169281 L25,178.669281 C25,119.519295 57.1931907,67.8894771 105.011512,40.3501901 L135,92.2989954 C105.009619,109.483749 84.8041871,141.810321 84.8041871,178.856781 Z" id="red" fill="#BD3632"></path>
      <path d="M235.050803,92.4864742 C205.21439,75.1028089 167.169843,73.7652453 135.133157,92.2884751 L134.862916,92.4447251 L105,40.6455806 L105.432385,40.3955806 C156.58355,10.8205878 217.307001,12.8896752 265,40.5376689 L235.050803,92.4864742 L235.050803,92.4864742 Z" id="yellow" fill="#EEAF30"></path>
      <path d="M235,92.2989954 L264.988488,40.3501901 C312.806809,67.8894771 345,119.519295 345,178.669281 L345,179.169281 L285.195813,179.169281 L285.195813,178.856781 C285.195813,141.810321 264.990381,109.483749 235,92.2989954 L235,92.2989954 Z" id="green" fill="#008542"></path>
      <text id="100%" line-spacing="15">
        <tspan x="350" y="180">100%</tspan>
      </text>
      <text id="50%">
        <tspan x="171" y="14">50%</tspan>
      </text>
      <text id="0%">
        <tspan x="0" y="178">0%</tspan>
      </text>
    </g>
    <g id="needle" transform="translate(175.000000, 19.000000)">
      <polygon id="Triangle" fill="#3C3C3B" points="10 0 15 162 5 162"></polygon>
    </g>
  </g>
</svg>

<input type="range" id="percent" value="50" min="0" max="100">
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

134 次

最近记录：

6 年，6 月 前
相关归档
自动边距不会在页面中居中 96
使用NEWER flexbox api在全高应用程序中进行Flexbox和垂直滚动 76
订阅者电子邮件:GMail将高度转换为最小高度 27
如何使用CSS打破<td>中的长单词？ 21
使用jQuery选择表中的下一个<td> 19
Python BeautifulSoup刮表 17
将自定义CSS标记添加到RMarkdown html文档 16
svg中的自定义字体 12
改变SVG动画的方向 8
如何在css样式中引用内联svg作为光标？ 3
难疑归档
如果我有jQuery背景,"在AngularJS中思考"？ 4518
如何在Python中复制文件？ 2171
静态类和单例模式之间的区别？ 1708
正确使用IDisposable接口 1586
如何将分离的HEAD与master/origin协调？ 1506
Markdown中的评论 1277
如何使用jQuery更改超链接的href 1231
基于容器宽度的字体缩放 1083
Visual Studio中的构建解决方案,重建解决方案和清洁解决方案之间的区别？ 1081
如何查找Python中是否存在目录 1048