Question

我在SVG中有大约300个path元素，所有元素都有不同的轮廓。我试图弄清楚是否有办法让他们从一个中心位置继承他们的stroke和stroke-width属性，以便我可以在一个地方（使用JavaScript）和所有路径更改该笔划将自动继承更改（无需迭代它们并逐个更改它们，这可能很慢）。

我试过这样做：

<svg>
  <defs>
    <path id="base-path" stroke="#f00" stroke-width="2px"></path>
  </defs>

  <g>
    <use xlink:href="#base-path" d="M655.4122777593284,559.3735699875456L654.1949190078633,555.3887773907059L658.1760111410327,552.9949065234823L662.5848239166088,564.7584631711534L654.5239348866377,566.2861923041205L652.878855492766,562.0062446004627L653.569788838192,559.4960802535879Z"/>
    <use xlink:href="#base-path" d="M668.9348303769535,569.1558517040312L664.0653953710934,566.6527113415123L663.3415604377898,569.6439835699075L661.4990715166535,568.1793081850988L663.7034779044416,561.2718180255733L665.5459668255778,563.7190849448948L668.5729129103017,563.229819290997Z"/>
    <!-- etc... -->
  </g>
</svg>

我希望所有use元素都像path元素一样呈现，每个元素都有自己独特的轮廓（它们都有唯一的d属性），但都具有相同的stroke元素{{ 1}}和stroke-width为#base-path。

但是这没用。 use元素根本不显示。当我在Chrome开发工具中检查它们时，它们似乎在技术上“渲染”，但宽度和高度为零。

我误解了use的工作原理吗？或者只是不可能做我想做的事情？

Answer 1

<use>没有d属性，您不能将其用作伪路径。有一些如何使用<use> here

的示例

尽管你是主要的问题，但这正是CSS的发明。只需将路径创建为<path>元素，但为它们赋予类属性，然后适当地设置笔触和笔触宽度属性，例如。

<path class="whatever" d="M655.4122777593284,559.3735699875456L654.1949190078633,555.3887773907059L658.1760111410327,552.9949065234823L662.5848239166088,564.7584631711534L654.5239348866377,566.2861923041205L652.878855492766,562.0062446004627L653.569788838192,559.4960802535879Z"/>
<path class="whatever" d="M668.9348303769535,569.1558517040312L664.0653953710934,566.6527113415123L663.3415604377898,569.6439835699075L661.4990715166535,568.1793081850988L663.7034779044416,561.2718180255733L665.5459668255778,563.7190849448948L668.5729129103017,563.229819290997Z"/>

<style>
 .whatever {
    stroke: #f00;
    stroke-width: 2px;
 }
</style>

当然，如果你的每一条路径都相同，那么你甚至不需要class属性，你可以这样做

<style>
 path {
    stroke: #f00;
    stroke-width: 2px;
 }
</style>

如何让几个路径元素从一个地方继承它们的笔画？

1 个答案: