有没有办法让 SVG 形状共享一个点数组/形状？可以在 CSS 中定义 SVG 形状吗？

Question

我一直在四处寻找这个，但一无所获。是否可以通过在一个地方定义多个 SVG 形状来共享它们的形状？似乎只能从我见过的所有内容中内联定义 SVG 形状。

例如：

//shape
<svg class="star" width="12cm" height="4cm" viewBox="0 0 1200 400">
<polygon fill="lime" stroke="blue" stroke-width="10" 
        points="850,75  958,137.5 958,262.5 850,325 742,262.6 742,137.5" />
</svg>
<br>
//same shape
<svg class="star" width="12cm" height="4cm" viewBox="0 0 1200 400">
<polygon fill="lime" stroke="blue" stroke-width="10" 
        points="850,75  958,137.5 958,262.5 850,325 742,262.6 742,137.5" />
</svg>
...

像这样的内联定义有很多错误，我不需要一一列举。

我希望能够做到这一点：

HTML
<svg class="star"><polygon /></svg><br>
<svg class="star"><polygon /></svg><br>
<svg class="star"><polygon /></svg><br>
<svg class="star"><polygon /></svg><br>
<svg class="star"><polygon /></svg><br>
<svg class="star"><polygon /></svg><br>
...

然后在一处定义所有内容，就像这样。

CSS
.star {
  width: 12cm;
  height: 4cm; 
  viewBox: 0 0 1200 400;
}

.star polygon {
  fill: lime; 
  stroke: blue; 
  stroke-width: 10px; 
  points: [850,75  958,137.5 958,262.5 850,325 742,262.6 742,137.5];
   //I've tried quotes, no quotes, quotes around the numbers.
}

但到目前为止，没有任何效果，我也没有找到任何示例，甚至没有找到一个 link 比内联定义点更好的东西。

一定有更好的办法！或许我没有尝试过正确的语法。

编辑：这与我发现的一样接近：svg patterns

Answer 1

因此您可以在 CSS 中更改 SVG 容器的大小，并在 JS 或 JQuery 中将点添加到数组或对象中。您可以试用该演示，看看它是否适合您。

$(document).ready(function() {
  var star = $('.star').find('polygon');
  var blob = $('.blob').find('polygon');

  var starObj = {
    points: '850,75  958,137.5 958,262.5 850,325 742,262.6 742,137.5',
    fill: 'lime',
    stroke: 'blue',
    strokeWidth: 10
  };

  var blobObj = {
    points: '800,75  900,137.5 958,262.5 700,325 742,262.6 742,137.5',
    fill: 'lime',
    stroke: 'blue',
    strokeWidth: 50
  };

  star.attr({
    'points': starObj.points,
    'fill': starObj.fill,
    'stroke': starObj.stroke,
    'stroke-width': starObj.strokeWidth
    
  });
  
    blob.attr({
    'points': blobObj.points,
    'fill': blobObj.fill,
    'stroke': blobObj.stroke,
    'stroke-width': blobObj.strokeWidth
    
  });
  
});

.star {
  width: 150px;
  height: 100px;
}
.blob {
  width: 100px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg class="star" viewBox="0 0 1200 400">
  <polygon fill="lime" stroke="blue" stroke-width="10" />
</svg>
<br>

<svg class="blob" viewBox="0 0 1200 400">
  <polygon fill="lime" stroke="blue" stroke-width="10" />
</svg>

Answer 2

是的，可以让多个 SVG 共享项目，例如点甚至整个 svg 图像。在可用的多种技术中，最能像您所描述的那样执行此操作的技术是使用 svg "use" 语句。

在页面顶部正文中包含类似的内容

<svg class="star">
 <defs>
  <polygon id="poly1" fill="lime" stroke="blue" stroke-width="10"
   points="850,75  958,137.5 958,262.5 850,325 742,262.6 742,137.5" />
 </defs>
</svg>

然后在您希望它出现的地方使用此语句。

<svg class="star" viewBox="0 0 1200 400">
 <use xlink:href="#poly1"></use>
</svg>

或者如果你想要两个

<svg class="star" viewBox="0 0 1200 400">
 <use xlink:href="#poly1"></use>
</svg>
<svg class="star" viewBox="0 0 1200 400">
 <use xlink:href="#poly1"></use>
</svg>

有没有办法让 SVG 形状共享一个点数组/形状？可以在 CSS 中定义 SVG 形状吗？

Is there a way to make SVG shapes share a point array / shape? Can an SVG shape be defined in CSS?

html

css

svg

inline