Question

想象一下，我们有很长的实例列表（例如，下面仅见两个这样的实例（INSTANCE1和INSTANCE2），它们都依赖于一些预定义的#DEFINED_RECTANGLE_WHITE在其定义中不包含笔划信息。

如您所见，某些实例将被缩放（例如，参见scale(1 2)）。我想知道现在抚摸所有这些实例的最佳方法是什么（所有实例都应具有相同的笔触宽度，我不希望笔触在缩放对象上的任何维度上都更宽）。

<use id="INSTANCE1"
  xlink:href="#DEFINED_RECTANGLE_WHITE"
  transform="rotate(90, 1, 1) translate(10,-400) scale(1 2)">
</use>
<use id="INSTANCE2"
  xlink:href="#DEFINED_RECTANGLE_WHITE"
  transform="translate(10,140)">
</use>

在没有SVG1.2功能的情况下该如何做？

Answer 1

您可以使用滤镜创建轮廓效果吗？您必须将use元素封装在一个组或另一个svg中，然后对其应用过滤器。

此外，膨胀运算符可能会产生不希望的结果，例如最后旋转的矩形中的斜角效果。

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 100 100">
  <defs>
    <rect id="rectangle" width="10" height="10" fill="rgb(200,220,120)"/>
    
    <filter id="outline">
      <feMorphology operator="dilate" radius="4" result="result1"/>
      <feFlood flood-color="rgb(51,51,51)" result="result2"/>
      <feComposite in="result2" in2="result1" operator="in" result="result3"/>
      <feComposite in="SourceGraphic" in2="result3"/>
    </filter>
  </defs>
  
  <g filter="url(#outline)">
    <use href="#rectangle" transform="translate(50,10) scale(4 1) rotate(90,1,1)"/>
    <use href="#rectangle" transform="translate(40,30)"/>
    <use href="#rectangle" transform="translate(20,50) scale(6 0.5)"/>
    <use href="#rectangle" transform="translate(60,70) rotate(45,1,1)"/>
  </g>
</svg>

edit：哦，快点！我写我的时候，@ Kaiido发表了完全相同的答案。很抱歉偷了你的雷声=（

在SVG1.1中可能具有类似于vector-effect =“ non-scaling-stroke”的结果

1 个答案: