使用SVG圆弧绘制局部圆

时间:2018-09-21 01:25:40

标签: javascript svg graphics geometry

我想使用SVG绘制局部弧。根据{{​​3}},将自动计算圆心。但是我的弧线圈满了。用图片进行演示更容易:

module parent(); parameter MODULE = "missing_module"; initial $display("I want to instantiate %s", MODULE); endmodule module top(); parent #(.MODULE("child_1")) p(); endmodule

docs

这里是指向SVG Arc overlapping a half circle链接的链接。

1 个答案:

答案 0 :(得分:1)

您可以在蓝色圆圈之前绘制圆弧(就像我画红色一样),也可以重画圆弧段(最后一行-我强调绿色,但是必须是蓝色)。因此,圆弧+分段的组合给出了月牙形新月形

   <!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
   <style>
  .yellow {
  color: #ff0000;
  }
  .grey {
  color: #00ff00;
  }
   </style>
   <body>
  <script>
     var app = angular.module("myShoppingList", []); 
     app.controller("myCtrl", function($scope) {
         $scope.countArr = [0, 1, 2, 3, 4];
         $scope.topics = [{ name: 'Chemistry', star_rating: 3 },
      { name: 'Physics', star_rating: 5 }];
     });
  </script>
  <div ng-app="myShoppingList" ng-controller="myCtrl">
     <div ng-repeat="topic in topics">
        <span ng-bind="topic.name" ></span> ->
        <i ng-repeat="i in countArr" ng-class="{'yellow': $index < topic.star_rating, 'grey': $index >= topic.star_rating}">[<span ng-if="$index < topic.star_rating" >*</span>]</i>
     </div>
  </div>
   </body>
</html>