svg路径内路径

问题描述

我如何在路径内部使用路径？

    </svg>
    <svg height="210" width="400">
      <path fill="rgb(176,60,178)" fill-opacity="0.4" d="M150 0 L75 200 L225 200 Z" >
        <title>test</title>
        <path fill="rgb(14,88,228)" d="M100 0 L50 100 L125 100 Z" >
      </path>
    </svg>

实际上，这是我理想中想要的：

bagel

根据百分比在下面的条形部分上绘画。我在d3工作

解决方法

您不能将一个路径标记嵌套在另一个路径中。

@Robert Longson评论如何

只需将路径一个接一个地放置。以后的道路将继续较早路径的顶部。

<path ..... />
<path ..... />

 <svg height="210" width="400">
      <path fill="rgb(176,60,178)" fill-opacity="0.4" d="M150 0 L75 200 L225 200 Z" />
        <title>test</title>
        <path fill="rgb(14,88,228)" d="M100 0 L50 100 L125 100 Z" />
      
    </svg>

您不能[1]：

仅允许以下内容：

Any number of the following elements,in any order:

    animation elements
    descriptive elements
    paint server elements 

clipPath,marker,mask,script,style

[1] https://svgwg.org/specs/paths/#PathElement

在SVG中，元素从上到下渲染：每个元素在另一个之上渲染。如果您希望一条路径在另一条路径上渲染，请将其放下：

housing['YrRenovated'] = housing['YrRenovated'].apply(lambda item: 2020-item if item > 0 else 0)

svg svg svg