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

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属性)，但都有与#base-path相同的stroke和stroke-width。

但这并不管用。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>

Answer 2

除了罗伯特·朗森之外，我只想举一个简单的例子:这样的东西就可以完成这项工作：

<svg xmlns="http://www.w3.org/2000/svg" onclick="
    document.getElementById('dynamicStyle')
    .textContent='line{stroke:green;stroke-width:10}'">

  <style type="text/css" id="dynamicStyle">
    line{stroke:black;stroke-width:4}
  </style>

  <line x2="100" y2="100"/>
</svg>

Try on jsFiddle (单击SVG可更改CSS)。