我用svelte做了一个折线图，在图表的底部有一个滑块，可以在那里更改日期。当使用滑块时，路径向外延伸并穿过y轴，然后当路径在svg外部时消失。但是，我希望当路径与y轴相交时，直线消失。我不知道我该怎么做才能让它工作。我调整了页边距，并试图把路径到一个div，但还没有工作。这里是repl
sxissh061#
一般来说，您可以将图形应该存在的rect定义为clipPath，并在图形视觉效果的clip-path中引用它。
rect
clipPath
clip-path
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="80" height="80" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <defs> <!-- Defines clipping area --> <clipPath clipPathUnits="userSpaceOnUse" id="clip-path"> <rect x="12" y="10" width="55" height="56" /> </clipPath> </defs> <g> <!-- Line is from x = 0 to x = 80, but clipped. --> <path style="fill:none;stroke:#ff0000;stroke-width:1;" d="M 0,57 80,23" clip-path="url(#clip-path)" /> <!-- Clips object --> <path style="fill:none;stroke:#000000;stroke-width:1;" d="M 12,12 V 68 H 68"/> </g> </svg>
1条答案
按热度按时间sxissh061#
一般来说，您可以将图形应该存在的
rect定义为clipPath，并在图形视觉效果的clip-path中引用它。