时间戳

首页 > 解决方案 > 在 SVG1.1 中可能有类似于 vector-effect="non-scaling-stroke" 的结果

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

问题描述

想象一下，我们有一个很长的实例列表（作为示例，请参见下面的两个这样的实例 (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 功能，如何做到这一点？

标签： svg

解决方案

您可以使用滤镜来创建轮廓效果吗？您必须将您的 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>

编辑：哦，快！@Kaiido 在我写我的时候发布了完全相同的答案。对不起，偷了你的雷=（

推荐阅读