Question

我在Illustrator中创建了一个徽标，我手动将其手工制作成SVG文件。这是一个非常详细的插图，包含大量的分层和混合，所以我有很多重复的渐变，只有gradientTransform属性的值不同。

这是一个例子

<radialGradient id="sil_bor_clr_layer_01" cx="145.8111" cy="91.9766" r="5.5753" gradientTransform="matrix(1.665142e-02 -0.9999 1.0812 1.800584e-02 43.939 236.1114)" gradientUnits="userSpaceOnUse">
    <stop  offset="0" style="stop-color:#FFFFFF"/>
    <stop  offset="0.6007" style="stop-color:#DBE2E8"/>
    <stop  offset="1" style="stop-color:#C0CDD8"/>
</radialGradient>

<radialGradient id="sil_bor_clr_layer_02" cx="121.087" cy="94.1915" r="6.7356" gradientTransform="matrix(-0.1704 -0.9854 0.917 -0.1586 55.3406 228.4433)" gradientUnits="userSpaceOnUse">
    <stop  offset="0" style="stop-color:#FFFFFF"/>
    <stop  offset="0.6007" style="stop-color:#DBE2E8"/>
    <stop  offset="1" style="stop-color:#C0CDD8"/>
</radialGradient>

<radialGradient id="sil_bor_clr_layer_03" cx="98.1764" cy="102.6783" r="7.6206" gradientTransform="matrix(-0.5989 -0.8008 0.6381 -0.4771 91.458 230.294)" gradientUnits="userSpaceOnUse">
    <stop  offset="0" style="stop-color:#FFFFFF"/>
    <stop  offset="0.6007" style="stop-color:#DBE2E8"/>
    <stop  offset="1" style="stop-color:#C0CDD8"/>
</radialGradient>

我还有另外21个使用相同渐变的元素，这意味着为了定义gradientTransform属性，我必须再定义21次。

有没有办法让我使用渐变在SVG元素上定义gradientTransform所以我可以只定义一次？这些特殊的元素有一个颜色层，阴影层和高亮层，这将是同一件事的大约60多个实例，这是非常荒谬的。我目前正在Angular中这样做，所以我知道我可以制作组件并导出一些const来处理这个问题，但是如果可能的话，我更愿意保留svg和css。

Answer 1

您可以使用href属性来引用模板渐变。

如果你想支持Safari，你需要使用xlink：href，因为Safari还不支持裸href。

{{ csrf_field() }}

head, body, svg {
  width: 100%;
  height: 100%;
}

如果您的渐变在每个形状上应该看起来相同，那么最好使用一个渐变并使用objectBoundingBox单位而不是userSpaceOnUse单位。

我需要帮助最小化SVG渐变的实例

1 个答案: