小编Jud*_*ahA的帖子

[对不起，我的英语不好]

我必须创建带有滚动按钮​​的可滚动视图，如下图所示：

规格：

• 当列表为 时overflow，则显示右/左按钮。
• 当没有溢出时，隐藏滚动按钮。
• 然后scrollLeft === 0禁用左按钮。另外，当该scrollLeft值为 max 时，禁用右键。

这是我的尝试：

<section class="list-with-scroll">

    <div class="list" #list>
        <div *ngFor="let i of items" class="item">{{i}}</div>
    </div>

    <button class="scroller" *ngIf="isOverflown(list)" [class.disable]="!canScrollStart(list)" (click)="scroll(list,-1)" id="scroll-left">&#8678;</button>

    <button class="scroller" *ngIf="isOverflown(list)" [class.disable]="!canScrollEnd(list)" (click)="scroll(list,1)">&#8680;</button>
</section>

export class AppComponent {
  items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"];

  isOverflown(element: HTMLElement) {
    return element.scrollWidth > element.clientWidth;
  }

  scroll(element: HTMLElement, direction: number) {
    element.scrollLeft += 100 * direction;
  }

  canScrollStart(element: …

我绝对是 SVG 的初学者，我必须创建类似下图的东西：

规格：

• 圆圈
• 具有顶部扇形 (90°)
• 顶部部分有一些文字

这是我的尝试：

<svg viewBox="0 0 100 100">

    <circle cx="50%" cy="50%" r="50%" style="fill:none;stroke:#00be00;stroke-width:5" />
    <path id="top-sector" style="fill:none;stroke:#be3000" d="M 15,37 A 50,50 0 0 1 80,50" />

    <text text-anchor="middle">
      <textPath xlink:href="#top-sector" startOffset="50%" style="font-size: 6px;">Hello World</textPath>
    </text>

</svg>

JsFiddle： https: //jsfiddle.net/9hprLxat/2/

我不知道：

• 如何将顶部扇区与圆圈对齐。
• 如何使 textPath 透明。
• 为什么圆圈溢出了 viewBox 感谢您的帮助！