主页 / 问题 / 1597967
Accepted
Лена
Asked:2024-10-27 20:21:53 +0800 CST2024-10-27 20:21:53 +0800 CST

将一个 svg 对象拆分为 2 个

  • 772

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256l105.3-105.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3z"/></svg>

有谁知道如何使用 svg，我想寻求帮助。将十字分成两条斜线，这样在视觉上它仍然是一个十字。仅从两个物体...

html5

3 个回答

  1. 在问题的代码中，绘制了一个轮廓，然后将其填充。可以在轮廓中标记多个段

    1. 直线 - 负责十字边的长度
    2. 圆形 - 负责十字的两端。

    要分成两部分，您需要从每个部分中删除不必要的直线。这些字母对应于一条直线L。l

    新线段可以绘制如下：

    1. 使用 转到起点M
    2. 画一个圆弧c ... s ...
    3. 画一条所需长度的直线L
    4. 绘制第二条圆弧
    5. 我们即将结束旅程z

    为了进行测试，您可以使用任何 svg 编辑器。例如这个https://yqnn.github.io/svg-path-editor/

    结果，您可以获得以下路径：

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<path  d="M 297.4 406.6 c 12.5 12.5 32.8 12.5 45.3 0 s 12.5 -32.8 0 -45.3 L 86.6 105.4 c -12.5 -12.5 -32.8 -12.5 -45.3 0 s -12.5 32.8 0 45.3 z"/>
<path d="M 342.6 150.6 c 12.5 -12.5 12.5 -32.8 0 -45.3 s -32.8 -12.5 -45.3 0 L 41.4 361.4 c -12.5 12.5 -12.5 32.8 0 45.3 s 32.8 12.5 45.3 0 z" />
</svg>

    • 5
  2. Best Answer

    使用INKSCAPE 0.92 的选项

    现在，可以在网站上下载编辑器的更现代版本：v1.4，但旧版本并非一切都那么复杂，更容易掌握。
    但如果您使用较新版本的编辑器，请重点关注主要命令和菜单项，它们对于所有版本都是相同的。

    帮助-INKSCAPE

    1. 在图形编辑器中打开源代码。

    我们看到图形的轮廓是由一条路径指定的。
    任务是将其分为两条路径

    在此输入图像描述

    1. 删除一根交叉线

    在此输入图像描述

    按住Shift并用鼠标标记斜线的节点
    选择 -删除选定的节点。

    1. 编辑节点

    在此输入图像描述

    选择菜单项：编辑轮廓节点或单击 F2

    接下来，拖动锚点控制杆，直至其与斜线轮廓的长边对齐

    在此输入图像描述

    对第二对锚点重复这些步骤。

    在此输入图像描述

    1. 将代码保存为 *.svg 格式

    2. 优化 svg 文件。通过 SVGOMG优化器运行它

    <svg xmlns="http://www.w3.org/2000/svg" width="384" height="512" viewBox="0 0 384 512">
<path d="m237.3 256 105.3-105.4a32.05 32.05 0 0 0 0-45.3 32.05 32.05 0 0 0-45.3 0L192 210.7C312.04 91.04 4.92 398.16 146.7 256L41.4 361.4a32.05 32.05 0 0 0 0 45.3 32.05 32.05 0 0 0 45.3 0L192 301.3C30.49 460.8 386.7 104.58 237.3 256Z"/>
</svg>

    1. 对另一条交叉线重复操作 1-5

    <svg xmlns="http://www.w3.org/2000/svg" width="384" height="512" viewBox="0 0 384 512">
<path d="M297.4 406.6a32.05 32.05 0 0 0 45.3 0 32.05 32.05 0 0 0 0-45.3L237.3 256C388.17 409.27 73.75 94.85 192 210.7L86.6 105.4a32.05 32.05 0 0 0-45.3 0 32.05 32.05 0 0 0 0 45.3L146.7 256C41.3 150.7 363.12 471.66 192 301.3Z"/>
</svg>

    1. 将两个路径放入一个 svg 文件中

    <svg xmlns="http://www.w3.org/2000/svg" width="384" height="512" viewBox="0 0 384 512">
<path d="M297.4 406.6a32.05 32.05 0 0 0 45.3 0 32.05 32.05 0 0 0 0-45.3L237.3 256C388.17 409.27 73.75 94.85 192 210.7L86.6 105.4a32.05 32.05 0 0 0-45.3 0 32.05 32.05 0 0 0 0 45.3L146.7 256C41.3 150.7 363.12 471.66 192 301.3Z"/>

    <path d="m237.3 256 105.3-105.4a32.05 32.05 0 0 0 0-45.3 32.05 32.05 0 0 0-45.3 0L192 210.7C312.04 91.04 4.92 398.16 146.7 256L41.4 361.4a32.05 32.05 0 0 0 0 45.3 32.05 32.05 0 0 0 45.3 0L192 301.3C30.49 460.8 386.7 104.58 237.3 256Z"/>
</svg>

    乍一看，这似乎很困难且耗时， 但重复这些步骤几次后，您会发现只需要几分钟。

    要使图标自适应，您需要将 *.svg 文件包装在容器中，并将绝对单位替换为相对单位：

    <style>
.container
{
width:30wv;
height:30wh;  
 
}
</style>

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" width="30vh"  viewBox="0 0 384 512">
<path d="M297.4 406.6a32.05 32.05 0 0 0 45.3 0 32.05 32.05 0 0 0 0-45.3L237.3 256C388.17 409.27 73.75 94.85 192 210.7L86.6 105.4a32.05 32.05 0 0 0-45.3 0 32.05 32.05 0 0 0 0 45.3L146.7 256C41.3 150.7 363.12 471.66 192 301.3Z"/>

    <path d="m237.3 256 105.3-105.4a32.05 32.05 0 0 0 0-45.3 32.05 32.05 0 0 0-45.3 0L192 210.7C312.04 91.04 4.92 398.16 146.7 256L41.4 361.4a32.05 32.05 0 0 0 0 45.3 32.05 32.05 0 0 0 45.3 0L192 301.3C30.49 460.8 386.7 104.58 237.3 256Z"/>
</svg>
</div>

    • 5

  3. 只需从头开始自己编写几行即可 - 就完成了。

    这里的红叉是我的，黑叉是来自问题。

    svg {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 100vmin;
}

svg + svg {
  animation: blink 3s linear infinite alternate;
}

@keyframes blink {
    0% { opacity: 1; }
   25% { opacity: 1; }
   90% { opacity: 0; }
  100% { opacity: 0; }
}
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256l105.3-105.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3z"/></svg>

<svg viewBox="-4 -4 8 8">
  <line x1="-2" y1="-2" x2="2" y2="2" stroke="red" stroke-linecap="round" />
  <line x1="-2" y1="2" x2="2" y2="-2" stroke="red" stroke-linecap="round" />
</svg>

    我还会在 css 中包含以下参数：

    svg {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 100vmin;
}

line {
  stroke: black;
  stroke-linecap: round;
}
    <svg viewBox="-4 -4 8 8">
  <line x1="-2" y1="-2" x2="2" y2="2" />
  <line x1="-2" y1="2" x2="2" y2="-2" />
</svg>

    但汉堡之前的动画：

    svg {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 100vmin;
}

line {
  stroke: black;
  stroke-linecap: round;
}
    <svg viewBox="-4 -4 8 8">
  <line x1="-2" y1="-2" x2="2" y2="2">
    <animate attributeType="XML" attributeName="y2" from="2" to="-2" dur="3s" repeatCount="indefinite" />
  </line>
  <line x1="0" y1="0" x2="0" y2="0" >
    <animate attributeType="XML" attributeName="x1" from="0" to="-2" dur="3s" repeatCount="indefinite" />
    <animate attributeType="XML" attributeName="x2" from="0" to="2" dur="3s" repeatCount="indefinite" />
  </line>
  <line x1="-2" y1="2" x2="2" y2="-2">
    <animate attributeType="XML" attributeName="y2" from="-2" to="2" dur="3s" repeatCount="indefinite" />
  </line>
</svg>

    • 4

相关问题