RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1602221
Accepted
Alexandr_TT
Alexandr_TT
Asked:2024-12-11 23:37:33 +0000 UTC2024-12-11 23:37:33 +0000 UTC 2024-12-11 23:37:33 +0000 UTC

为什么SVG合并路径后会被切断?

  • 772

我有下面的 SVG。我将所有路径合并为一条。
但我的最终 SVG 被裁剪了。有人可以帮忙吗?
附上前后截图:

曾是:

<svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.5952 17.7136L16.8883 14.2878C16.7414 14.0032 16.4482 13.8138 16.1284 13.8138H12.968V10.7403C12.968 10.2664 12.5815 9.8739 12.1149 9.8739C11.6482 9.8739 11.2617 10.2664 11.2617 10.7403V14.6808C11.2617 15.1548 11.6482 15.5472 12.1149 15.5472H15.6081L17.0748 18.4992C17.2217 18.797 17.5279 18.9731 17.8347 18.9731C17.968 18.9731 18.1014 18.9461 18.2211 18.8784C18.6347 18.6615 18.8082 18.1468 18.5952 17.7136Z" fill="black"/>
<path d="M14.3166 17.0235C13.7301 17.5381 12.9832 17.8359 12.2098 17.8359C10.4499 17.8359 9.03624 16.3872 9.03624 14.6132C9.03624 13.6114 9.48937 12.6767 10.2764 12.0543C10.6498 11.7565 10.7165 11.2149 10.4232 10.8356C10.13 10.4564 9.59668 10.3887 9.22323 10.6865C8.00967 11.6343 7.31641 13.056 7.31641 14.5994C7.31641 17.3344 9.50284 19.5555 12.1967 19.5555C13.3832 19.5555 14.5165 19.1223 15.4233 18.3231C15.7832 18.0115 15.8098 17.4699 15.5035 17.1044C15.2098 16.7527 14.6635 16.7252 14.3166 17.0235Z" fill="black"/>
<path d="M13.5587 7.91063C13.5587 8.7257 12.9077 9.38628 12.1053 9.38628C11.3027 9.38628 10.6523 8.72565 10.6523 7.91063C10.6523 7.09562 11.3028 6.43445 12.1053 6.43445C12.9078 6.43445 13.5587 7.0956 13.5587 7.91063Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.34438 18.4364C7.34438 18.8637 6.99197 19.2103 6.55707 19.2103C6.12237 19.2103 5.76976 18.8639 5.76976 18.4364V13.1549C5.76976 13.0758 5.70415 13.0113 5.62374 13.0113H5.60087C5.52045 13.0113 5.45484 13.0758 5.45484 13.1549V18.4364C5.45484 18.8637 5.10242 19.2103 4.66753 19.2103C4.23263 19.2103 3.88022 18.8639 3.88022 18.4364C3.88022 15.0285 3.88022 11.3636 3.88022 7.93933C3.88022 7.86028 3.81461 7.79579 3.73419 7.79579H3.71132C3.63091 7.79579 3.5653 7.86028 3.5653 7.93933C3.5653 9.40132 3.5653 10.5185 3.5653 11.9805C3.5653 12.3153 3.28918 12.5868 2.94876 12.5868C2.60815 12.5868 2.33203 12.3153 2.33203 11.9805C2.33203 10.4045 2.33203 9.17356 2.33203 7.59752C2.33203 6.64743 3.12028 5.87258 4.08679 5.87258C5.10374 5.87258 6.12087 5.87258 7.13781 5.87258C8.10432 5.87258 8.89257 6.64743 8.89257 7.59752C8.89257 9.17356 8.89257 10.4045 8.89257 11.9805C8.89257 12.3153 8.61645 12.5868 8.27584 12.5868C7.93524 12.5868 7.65931 12.3153 7.65931 11.9805C7.65931 10.5185 7.65931 9.40132 7.65931 7.93933C7.65931 7.86028 7.5937 7.79579 7.51328 7.79579H7.49041C7.40999 7.79579 7.34438 7.86028 7.34438 7.93933C7.34438 11.3638 7.34438 15.0287 7.34438 18.4364ZM5.6123 2.44446C6.44704 2.44446 7.12394 3.10967 7.12394 3.9304C7.12394 4.75094 6.44722 5.41634 5.6123 5.41634C4.77738 5.41634 4.10067 4.75113 4.10067 3.9304C4.10067 3.10967 4.77757 2.44446 5.6123 2.44446Z" fill="black"/>
</svg>

变成:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.1"
   x="0px" y="0px"
   width="24px"
   height="24px"
   viewBox="0 0 24 24"
   id="companion-24">
   
<!-- Объединены все paths -->
<path fill="#000000" fill-rule="evenodd" clip-rule="evenodd" d="M18.5952 17.7136L16.8883 14.2878C16.7414 14.0032 16.4482 13.8138 16.1284 13.8138H12.968V10.7403C12.968 10.2664 12.5815 9.8739 12.1149 9.8739C11.6482 9.8739 11.2617 10.2664 11.2617 10.7403V14.6808C11.2617 15.1548 11.6482 15.5472 12.1149 15.5472H15.6081L17.0748 18.4992C17.2217 18.797 17.5279 18.9731 17.8347 18.9731C17.968 18.9731 18.1014 18.9461 18.2211 18.8784C18.6347 18.6615 18.8082 18.1468 18.5952 17.7136ZM14.3166 17.0235C13.7301 17.5381 12.9832 17.8359 12.2098 17.8359C10.4499 17.8359 9.03624 16.3872 9.03624 14.6132C9.03624 13.6114 9.48937 12.6767 10.2764 12.0543C10.6498 11.7565 10.7165 11.2149 10.4232 10.8356C10.13 10.4564 9.59668 10.3887 9.22323 10.6865C8.00967 11.6343 7.31641 13.056 7.31641 14.5994C7.31641 17.3344 9.50284 19.5555 12.1967 19.5555C13.3832 19.5555 14.5165 19.1223 15.4233 18.3231C15.7832 18.0115 15.8098 17.4699 15.5035 17.1044C15.2098 16.7527 14.6635 16.7252 14.3166 17.0235ZM13.5587 7.91063C13.5587 8.7257 12.9077 9.38628 12.1053 9.38628C11.3027 9.38628 10.6523 8.72565 10.6523 7.91063C10.6523 7.09562 11.3028 6.43445 12.1053 6.43445C12.9078 6.43445 13.5587 7.0956 13.5587 7.91063ZM7.34438 18.4364C7.34438 18.8637 6.99197 19.2103 6.55707 19.2103C6.12237 19.2103 5.76976 18.8639 5.76976 18.4364V13.1549C5.76976 13.0758 5.70415 13.0113 5.62374 13.0113H5.60087C5.52045 13.0113 5.45484 13.0758 5.45484 13.1549V18.4364C5.45484 18.8637 5.10242 19.2103 4.66753 19.2103C4.23263 19.2103 3.88022 18.8639 3.88022 18.4364C3.88022 15.0285 3.88022 11.3636 3.88022 7.93933C3.88022 7.86028 3.81461 7.79579 3.73419 7.79579H3.71132C3.63091 7.79579 3.5653 7.86028 3.5653 7.93933C3.5653 9.40132 3.5653 10.5185 3.5653 11.9805C3.5653 12.3153 3.28918 12.5868 2.94876 12.5868C2.60815 12.5868 2.33203 12.3153 2.33203 11.9805C2.33203 10.4045 2.33203 9.17356 2.33203 7.59752C2.33203 6.64743 3.12028 5.87258 4.08679 5.87258C5.10374 5.87258 6.12087 5.87258 7.13781 5.87258C8.10432 5.87258 8.89257 6.64743 8.89257 7.59752C8.89257 9.17356 8.89257 10.4045 8.89257 11.9805C8.89257 12.3153 8.61645 12.5868 8.27584 12.5868C7.93524 12.5868 7.65931 12.3153 7.65931 11.9805C7.65931 10.5185 7.65931 9.40132 7.65931 7.93933C7.65931 7.86028 7.5937 7.79579 7.51328 7.79579H7.49041C7.40999 7.79579 7.34438 7.86028 7.34438 7.93933C7.34438 11.3638 7.34438 15.0287 7.34438 18.4364ZM5.6123 2.44446C6.44704 2.44446 7.12394 3.10967 7.12394 3.9304C7.12394 4.75094 6.44722 5.41634 5.6123 5.41634C4.77738 5.41634 4.10067 4.75113 4.10067 3.9304C4.10067 3.10967 4.77757 2.44446 5.6123 2.44446Z"/>
</svg>

在此输入图像描述

问题的免费翻译为什么 SVG 在合并路径后会被剪切?来自成员 @Dolly。

javascript
  • 4 4 个回答
  • 80 Views

4 个回答

  • Voted
  1. Alexandr_TT
    2024-12-11T23:37:33Z2024-12-11T23:37:33Z

    要解决这个问题,您需要翻转(交换路径的起点和终点)第二条路径,即绘制轮椅的路径。
    否则,路径的重叠部分将为空。请在此处阅读有关 SVG 填充规则
    的更多信息

    <svg width="210" height="220" viewBox="0 0 21 22" xmlns="http://www.w3.org/2000/svg">
    <path d="M18.5952 17.7136L16.8883 14.2878C16.7414 14.0032 16.4482 13.8138 16.1284 13.8138H12.968V10.7403C12.968 10.2664 12.5815 9.8739 12.1149 9.8739C11.6482 9.8739 11.2617 10.2664 11.2617 10.7403V14.6808C11.2617 15.1548 11.6482 15.5472 12.1149 15.5472H15.6081L17.0748 18.4992C17.2217 18.797 17.5279 18.9731 17.8347 18.9731C17.968 18.9731 18.1014 18.9461 18.2211 18.8784C18.6347 18.6615 18.8082 18.1468 18.5952 17.7136Z
             M14.3166,17.0235L14.3166,17.0235C14.6635,16.7252 15.2098,16.7527 15.5035,17.1044C15.8098,17.4699 15.7832,18.0115 15.4233,18.3231C14.5165,19.1223 13.3832,19.5555 12.1967,19.5555C9.50284,19.5555 7.31641,17.3344 7.31641,14.5994C7.31641,13.056 8.00967,11.6343 9.22323,10.6865C9.59668,10.3887 10.13,10.4564 10.4232,10.8356C10.7165,11.2149 10.6498,11.7565 10.2764,12.0543C9.48937,12.6767 9.03624,13.6114 9.03624,14.6132C9.03624,16.3872 10.4499,17.8359 12.2098,17.8359C12.9832,17.8359 13.7301,17.5381 14.3166,17.0235Z
             M13.5587 7.91063C13.5587 8.7257 12.9077 9.38628 12.1053 9.38628C11.3027 9.38628 10.6523 8.72565 10.6523 7.91063C10.6523 7.09562 11.3028 6.43445 12.1053 6.43445C12.9078 6.43445 13.5587 7.0956 13.5587 7.91063Z 
             M7.34438 18.4364C7.34438 18.8637 6.99197 19.2103 6.55707 19.2103C6.12237 19.2103 5.76976 18.8639 5.76976 18.4364V13.1549C5.76976 13.0758 5.70415 13.0113 5.62374 13.0113H5.60087C5.52045 13.0113 5.45484 13.0758 5.45484 13.1549V18.4364C5.45484 18.8637 5.10242 19.2103 4.66753 19.2103C4.23263 19.2103 3.88022 18.8639 3.88022 18.4364C3.88022 15.0285 3.88022 11.3636 3.88022 7.93933C3.88022 7.86028 3.81461 7.79579 3.73419 7.79579H3.71132C3.63091 7.79579 3.5653 7.86028 3.5653 7.93933C3.5653 9.40132 3.5653 10.5185 3.5653 11.9805C3.5653 12.3153 3.28918 12.5868 2.94876 12.5868C2.60815 12.5868 2.33203 12.3153 2.33203 11.9805C2.33203 10.4045 2.33203 9.17356 2.33203 7.59752C2.33203 6.64743 3.12028 5.87258 4.08679 5.87258C5.10374 5.87258 6.12087 5.87258 7.13781 5.87258C8.10432 5.87258 8.89257 6.64743 8.89257 7.59752C8.89257 9.17356 8.89257 10.4045 8.89257 11.9805C8.89257 12.3153 8.61645 12.5868 8.27584 12.5868C7.93524 12.5868 7.65931 12.3153 7.65931 11.9805C7.65931 10.5185 7.65931 9.40132 7.65931 7.93933C7.65931 7.86028 7.5937 7.79579 7.51328 7.79579H7.49041C7.40999 7.79579 7.34438 7.86028 7.34438 7.93933C7.34438 11.3638 7.34438 15.0287 7.34438 18.4364ZM5.6123 2.44446C6.44704 2.44446 7.12394 3.10967 7.12394 3.9304C7.12394 4.75094 6.44722 5.41634 5.6123 5.41634C4.77738 5.41634 4.10067 4.75113 4.10067 3.9304C4.10067 3.10967 4.77757 2.44446 5.6123 2.44446Z" />
    </svg>

    成员 @enxaneta的答案的免费翻译 。

    • 5
  2. Alexandr_TT
    2024-12-12T07:20:17Z2024-12-12T07:20:17Z

    反向 SVG 路径

    答案的作者enxaneta开发了утилиту一种反转任何路径的方法:

    let the_d, closed, lc_d_ry, the_d_ry, theReversedD;
    
    Init();
    
    TA.addEventListener("input", () => {
      Init();
    });
    
    function Init() {
      // the value of the d is the value of the textarea
      the_d = TA.value;
      // set the d atteibute of the path
      thePath.setAttributeNS(null, "d", the_d);
      // set the viewBox of the svg element
      setViewBox(thePath);
      // is the path closed?
      closed = null;
      //formatedArgsArray takes care of long commands
      lc_d_ry = formatedArgsArray(the_d);
      //SVG2UpperCase changes all commands to uppercase
      the_d_ry = SVG2UpperCase(lc_d_ry);
    
      // get the reversed d
      theReversedD = getNewD(the_d_ry);
      // set the attribute d for the reversedPath
      reversedPath.setAttributeNS(null, "d", theReversedD);
      output.textContent = theReversedD;
    }
    
    function setViewBox(thePath) {
      let BB = thePath.getBBox();
      let viewBx = `${BB.x - 10} ${BB.y - 10} ${BB.width + 20} ${BB.height + 20}`;
      theSVG.setAttributeNS(null, "viewBox", viewBx);
    
      reversedSVG.setAttributeNS(null, "viewBox", viewBx);
    }
    
    // ---------Functions used to reverse the path
    function getNewD(the_d_ry) {
      let commands = S2C_T2Q(the_d_ry);
      closed = ifClosedPath(commands);
    
      let newD = "M";
      let c, lastX, lastY, lastUC;
    
      for (let i = commands.length - 1; i >= 0; i--) {
        c = commands[i];
        lastX = c[c.length - 2];
        lastY = c[c.length - 1];
    
        newD += `${lastX},${lastY}`; //M200,55L
    
        lastUC = c[0];
        newD += lastUC;
    
        //console.log(c)
    
        if (lastUC == "A") {
          newD += `${c[1]},${c[2]} ${c[3]} ${c[4]} ${Math.abs(c[5] - 1)}`;
        }
    
        if (lastUC == "C") {
          newD += `${c[3]},${c[4]} ${c[1]},${c[2]} `;
        }
    
        if (lastUC == "Q") {
          newD += `${c[1]},${c[2]} `;
        }
      }
      //remove the last M from the newD string
      if (newD.charAt(newD.length - 1) == "M") {
        newD = newD.substring(0, newD.length - 1);
      }
    
      if (closed) {
        newD += "Z";
      }
    
      return newD;
    }
    
    function S2C_T2Q(commands) {
      // a function to change S commands to C and T commands to Q
    
      let newCommands = [];
      for (let i = 0; i < commands.length; i++) {
        let command = commands[i];
        let previous = commands[i - 1];
    
        if (command[0] == "S") {
          newCommands.push(S2C(previous, command));
        } else if (command[0] == "T") {
          newCommands.push(T2Q(previous, command));
        } else {
          newCommands.push(command);
        }
      }
      return newCommands;
    }
    function ifClosedPath(commands) {
      // if the last command is "Z"
      if (commands[commands.length - 1][0] == "Z") {
        // remove the last item from array
        commands.pop();
        // copy the first command
        let lastCommand = commands[0].slice();
        // change the initial "M" with "L"
        lastCommand[0] = "L";
        // add the last command at the end of the commands array
        commands.push(lastCommand);
        // it's a closed array?: yes it is
        return true;
      } else {
        return false;
      }
    }
    //a function to change the T command to a Q command
    function T2Q(previous, command) {
      let reflected = getReflectedPoint(previous, command);
      return ["Q", reflected.x, reflected.y, command[1], command[2]];
    }
    //a function to change the S command to a C command
    function S2C(previous, command) {
      let reflected = getReflectedPoint(previous, command);
      return [
        "C",
        reflected.x,
        reflected.y,
        command[1],
        command[2],
        command[3],
        command[4]
      ];
    }
    // a function to get the reflected point for the T & S commands
    function getReflectedPoint(previous, command) {
      let x2 = Number(previous[previous.length - 4]); //cp x
      let y2 = Number(previous[previous.length - 3]); //cp y
      let x3 = Number(previous[previous.length - 2]); //joining point x
      let y3 = Number(previous[previous.length - 1]); //joining point y
    
      ///////////////////////////////////////
      // the reflected control point
      let reflected = {};
      reflected.x = 2 * x3 - x2;
      reflected.y = 2 * y3 - y2;
      ///////////////////////////////////////
    
      return reflected;
    }
    
    //--------------Get the array of the svg commands---------
    function formatedArgsArray(d) {
      //takes care of long commands
      /*The command letter can be eliminated on subsequent commands if the same command is used multiple times in a row (e.g., you can drop the second "L" in "M 100 200 L 200 100 L -100 -200" and use "M 100 200 L 200 100 -100 -200" instead).*/
      let ArgsRy = getArgsRys(d);
      let newArgsArray = [];
      ArgsRy.map((a, index) => {
        let prefix = a[0];
        let UCprefix = prefix.toUpperCase();
    
        let n, tempRy;
        if (UCprefix == "H" || UCprefix == "V") {
          n = 1;
        }
        if (UCprefix == "L" || UCprefix == "T" || UCprefix == "M") {
          n = 2;
        }
        if (UCprefix == "S" || UCprefix == "Q") {
          n = 4;
        }
        if (UCprefix == "C") {
          n = 6;
        }
        if (UCprefix == "A") {
          n = 7;
        }
        if (a.length > n + 1) {
          //if the length of the array a is longer than it should be
          tempRy = a.splice(1);
          //long_Absolute_command returns an array of arrays
          let newTempsArray = long_Absolute_command(tempRy, n, prefix);
          ArgsRy[index] = newTempsArray;
        }
      });
    
      ArgsRy.map(a => {
        if (Array.isArray(a[0])) {
          //if it's an array of arrays
          a.map(_a => {
            newArgsArray.push(_a);
          });
        } else {
          newArgsArray.push(a);
        }
      });
    
      return newArgsArray;
    }
    
    function long_Absolute_command(tempRy, n, prefix) {
      /* This function is splitting a long command like this:  ["L", 160", "160.622", "90", "160.622", "55", "100", "90", "39.378", "160", "39.378", "195", "100"] in several L commands: */
      //tempRy = ["160", "160.622", "90", "160.622", "55", "100", "90", "39.378", "160", "39.378", "195", "100"]
      //prefix = "L"
      //n = 2 (After the L comes 2 coords: x and y)
    
      let CommandsRy = [];
    
      while (tempRy.length > 0) {
        CommandsRy.push(tempRy.splice(0, n));
      }
    
      CommandsRy.forEach(c => {
        c = c.unshift(prefix);
      });
    
      // CommandsRy = [["L", "160", "160.622"],["L", "90", "160.622"],["L", "55", "100"],["L", "90", "39.378"],["L", "160", "39.378"],["L", "195", "100"]]
    
      return CommandsRy;
    }
    
    function getArgs(d) {
      //remove breaklines and tabs and spaces
      let _d = d.replace(/\r?\n|\r|\t|  +/g, "");
    
      if (_d.charAt(0) == "m") {
        _d = "M" + _d.slice(1);
      }
      let argsRX = /(?=[a-zA-Z])/;
      let args = _d.split(argsRX);
    
      return args;
    }
    
    function getArgsRys(d) {
      let args = getArgs(d);
    
      let ArgsRy = [];
    
      for (let i = 0; i < args.length; i++) {
        let values = args[i]
          .slice(1)
          .replace(/\-/g, " -")
          .split(/[ ,]+/);
    
        values.map((p, i) => {
          if (p == "") {
            values.splice(i, 1);
          }
        });
    
        let ry = [args[i].charAt(0)].concat(values);
        ArgsRy.push(ry);
      }
      return ArgsRy;
    }
    //--------------END Get the array of the svg commands-----
    
    function SVG2UpperCase(commands) {
      for (let i = 1; i < commands.length; i++) {
        let c = commands[i];
        let prev = commands[i - 1];
    
        let x_ = Number(prev[prev.length - 2]);
        let y_ = Number(prev[prev.length - 1]);
    
        if (c[0].toUpperCase() !== c[0]) {
          //if is lower case
    
          switch (c[0]) {
            case "v":
              c[0] = "L";
              c[1] = x_; //x
              c[2] = Number(c[2]) + y_; //y
              break;
            case "h":
              c[0] = "L";
              c[1] = Number(c[1]) + x_; //x
              c[2] = y_; //y
              break;
            case "q":
            case "s":
              c[1] = Number(c[1]) + x_; //x
              c[2] = Number(c[2]) + y_; //y
              c[3] = Number(c[3]) + x_; //x
              c[4] = Number(c[4]) + y_; //y
              break;
            case "c":
              c[1] = Number(c[1]) + x_; //x
              c[2] = Number(c[2]) + y_; //y
              c[3] = Number(c[3]) + x_; //x
              c[4] = Number(c[4]) + y_; //y
              c[5] = Number(c[5]) + x_; //x
              c[6] = Number(c[6]) + y_; //y
              break;
            case "z":
              c[0] = "Z";
              break;
            default:
              // l, t, m, a
              c[c.length - 2] = Number(c[c.length - 2]) + x_; //x
              c[c.length - 1] = Number(c[c.length - 1]) + y_; //y
          }
        } // END if is lower case
    
        c[0] = c[0].toUpperCase();
      }
    
      return commands;
    }
    h4 {
      font-family: verdana;
      font-size: 2rem;
      text-align: center;
      margin-bottom: 0.5em;
    }
    
    svg {
      border: 1px solid #d9d9d9;
      fill: none;
      stroke: green;
      stroke-width: 3px;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    
    textarea {
      width: 100%;
      max-width: 30rem;
      margin: 1em auto;
      display: block;
    }
    
    .wrap {
      max-width: 30rem;
      margin: 1em auto;
    }
    
    .wrap:nth-of-type(2) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 1em;
    }
    p {
      text-align: center;
    }
    em {
      font-family: serif;
    }
    #theDefs {
      height: 0;
      width: 0;
      position: absolute;
      left: -100em;
    }
    <h4>Reverse SVG path</h4> 
    <p><em>Using a marker to show the change</em></p>
    <div class="wrap"> 
    <label>Input: the path you want to reverse</label>
    <textarea id="TA">M10 80 Q 52.5 10, 95 80 T 180 80</textarea>
    </div>
    
    
    <div class="wrap">  
    <svg id="theSVG">
        <path id="thePath" d="" marker-end="url(#arrow)"></path>
    </svg>
    
    <svg id="reversedSVG">
        <path id="reversedPath" d="" marker-end="url(#arrow)"></path>
    </svg>
    </div>
    <div class="wrap">
    <label>Output: the reversed path</label>
    <textarea id="output"></textarea>
    </div>  
    </div>
    
    
    <svg id="theDefs">
    <defs>
    <marker id="arrow" markerWidth="6" markerHeight="6" refX="3" refY="3" orient="auto" stroke="none" fill="green" >
    <path d="M0,0L4,3L0,6Z" />
    </marker>
    </defs> 
    </svg>

    • 3
  3. Best Answer
    Leonid
    2024-12-12T04:04:51Z2024-12-12T04:04:51Z

    您可以在任何编辑器中组合这些路径,而不是复杂地反转重叠元素的矢量路径。即将站立的人的躯干和椅子的图形组合成一个封闭的图形。

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 55 55" id="companion-24">
    
      <path d="M10.24 0.83c2.61,0 4.73,2.08 4.73,4.64 0,2.57 -2.12,4.65 -4.73,4.65 -2.61,0 -4.72,-2.08 -4.72,-4.65 0,-2.56 2.11,-4.64 4.72,-4.64zm40.58 47.72l-5.34 -10.71c-0.46,-0.89 -1.37,-1.48 -2.37,-1.48l-9.88 0 0 -9.6c0,-1.49 -1.21,-2.71 -2.67,-2.71 -1.45,0 -2.66,1.22 -2.66,2.71l0 12.31c0,1.48 1.21,2.71 2.66,2.71l10.92 0 4.58 9.22c0.46,0.93 1.42,1.48 2.38,1.48 0.42,0 0.83,-0.08 1.21,-0.29 1.29,-0.68 1.83,-2.29 1.17,-3.64zm-13.38 -2.16c-1.83,1.61 -4.16,2.54 -6.58,2.54 -5.5,0 -9.92,-4.53 -9.92,-10.07 0,-3.13 1.42,-6.05 3.88,-8 1.17,-0.93 1.37,-2.62 0.46,-3.81 -0.92,-1.18 -2.59,-1.39 -3.75,-0.46 -0.36,0.28 -0.71,0.57 -1.04,0.88l0 -10.54c0,-2.97 -2.46,-5.39 -5.48,-5.39 -3.18,0 -6.36,0 -9.53,0 -3.02,0 -5.49,2.42 -5.49,5.39 0,4.93 0,8.78 0,13.7 0,1.05 0.87,1.9 1.93,1.9 1.06,0 1.93,-0.85 1.93,-1.9 0,-4.57 0,-8.06 0,-12.63 0,-0.25 0.2,-0.45 0.45,-0.45l0.07 0c0.26,0 0.46,0.2 0.46,0.45 0,10.7 0,22.16 0,32.81 0,1.33 1.1,2.41 2.46,2.41 1.36,0 2.46,-1.08 2.46,-2.41l0 -16.51c0,-0.25 0.21,-0.45 0.46,-0.45l0.07 0c0.25,0 0.46,0.2 0.46,0.45l0 16.51c0,1.33 1.1,2.41 2.46,2.41 1.36,0 2.46,-1.08 2.46,-2.41l0 -10.34c0.81,7.77 7.29,13.83 15.16,13.83 3.71,0 7.25,-1.35 10.08,-3.85 1.13,-0.97 1.21,-2.66 0.25,-3.81 -0.91,-1.1 -2.62,-1.18 -3.71,-0.25zm-20.28 -14.46c-0.8,1.62 -1.31,3.38 -1.5,5.22l0 -19.15c0,-0.25 0.2,-0.45 0.45,-0.45l0.07 0c0.26,0 0.46,0.2 0.46,0.45 0,4.57 0,8.06 0,12.63 0,0.5 0.2,0.96 0.52,1.3zm17.92 -14.02c0,2.55 -2.04,4.61 -4.55,4.61 -2.5,0 -4.54,-2.06 -4.54,-4.61 0,-2.54 2.04,-4.61 4.54,-4.61 2.51,0 4.55,2.07 4.55,4.61z"/>
    </svg>

    • 2
  4. Alexandr_TT
    2024-12-12T22:37:49Z2024-12-12T22:37:49Z

    也许问题的作者采用了专业的图标,通常包含多个路径,并且默认设计为黑白,以便让用户有机会按原样使用颜色,或者为图标的不同部分涂上不同的颜色。
    根本没有必要将几条路合二为一。在决定图标和 Web 应用程序之间的颜色匹配时,您会失去灵活性。

    下面是一些如何使用 CSS 变量实现多色图标的示例

    在此输入图像描述

    • 将鼠标悬停在该图标上时,黑白版本的图标会变成彩色图标

    :root {
      --sec:1s;
      }
     #armchair {
      --color-1: black;
      --color-2: black;
      --color-3: black;
     
     }
    
      #armchair:hover {
     --color-1: gold;
      --color-2: skyblue;
      --color-3: yellowgreen;
       
     }
     rect, path {
     transition: var(--sec);
    {
    <svg width="210" height="220" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g id="armchair">      
       
       <!-- Сопровождающий -->
        <path fill="var(--color-1)"   d="M7.3 18.4c0 .5-.3.8-.7.8a.8.8 0 0 1-.8-.8v-5.2l-.2-.2-.1.2v5.2c0 .5-.4.8-.8.8a.8.8 0 0 1-.8-.8V8l-.2-.1-.1.1v4c0 .4-.3.7-.7.7a.6.6 0 0 1-.6-.6V7.6c0-1 .8-1.7 1.8-1.7h3c1 0 1.8.7 1.8 1.7V12c0 .3-.3.6-.6.6a.6.6 0 0 1-.6-.6V8l-.2-.2-.2.1v10.5Zm-1.7-16c.8 0 1.5.7 1.5 1.5 0 .9-.7 1.5-1.5 1.5S4.1 4.8 4.1 4c0-.8.7-1.5 1.5-1.5Z"/>  
    
      <!--  Человек -->
      <path fill="var(--color-2)"  d="m18.6 17.7-1.7-3.4a.9.9 0 0 0-.8-.5H13v-3c0-.5-.4-1-.9-1s-.8.5-.8 1v3.9c0 .5.3.8.8.8h3.5l1.5 3c.1.3.4.5.7.5l.4-.1c.4-.2.6-.8.4-1.2Z" />
              <!--  коляска --> 
      <path fill="var(--color-3)"  d="M14.3 17c-.6.5-1.3.8-2 .8A3.2 3.2 0 0 1 9 14.6c0-1 .5-2 1.3-2.5.3-.3.4-.9.1-1.3a.8.8 0 0 0-1.2-.1 5 5 0 0 0-1.9 3.9 4.9 4.9 0 0 0 8.1 3.7c.4-.3.4-.8.1-1.2a.8.8 0 0 0-1.2 0ZM13.6 8c0 .7-.7 1.4-1.5 1.4s-1.4-.7-1.4-1.5.6-1.5 1.4-1.5c.8 0 1.5.7 1.5 1.5Z" />
         <rect width="100%" height="100%" fill="transparent" />
      </g>
    </svg>

    • 悬停时,图标的配色方案会发生变化

    :root {
      --sec:1s;
      }
     #armchair {
      --color-1: #c13127;
      --color-2: #FF00AE;
      --color-3: #cacaea;
     
     }
    
      #armchair:hover {
     --color-1: gold;
      --color-2: skyblue;
      --color-3: yellowgreen;
       
     }
     rect, path {
     transition: var(--sec);
    {
    <svg width="210" height="220" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g id="armchair">      
       
       <!-- Сопровождающий -->
        <path fill="var(--color-1)"   d="M7.3 18.4c0 .5-.3.8-.7.8a.8.8 0 0 1-.8-.8v-5.2l-.2-.2-.1.2v5.2c0 .5-.4.8-.8.8a.8.8 0 0 1-.8-.8V8l-.2-.1-.1.1v4c0 .4-.3.7-.7.7a.6.6 0 0 1-.6-.6V7.6c0-1 .8-1.7 1.8-1.7h3c1 0 1.8.7 1.8 1.7V12c0 .3-.3.6-.6.6a.6.6 0 0 1-.6-.6V8l-.2-.2-.2.1v10.5Zm-1.7-16c.8 0 1.5.7 1.5 1.5 0 .9-.7 1.5-1.5 1.5S4.1 4.8 4.1 4c0-.8.7-1.5 1.5-1.5Z"/>  
    
      <!--  Человек -->
      <path fill="var(--color-2)"  d="m18.6 17.7-1.7-3.4a.9.9 0 0 0-.8-.5H13v-3c0-.5-.4-1-.9-1s-.8.5-.8 1v3.9c0 .5.3.8.8.8h3.5l1.5 3c.1.3.4.5.7.5l.4-.1c.4-.2.6-.8.4-1.2Z" />
              <!--  коляска --> 
      <path fill="var(--color-3)"  d="M14.3 17c-.6.5-1.3.8-2 .8A3.2 3.2 0 0 1 9 14.6c0-1 .5-2 1.3-2.5.3-.3.4-.9.1-1.3a.8.8 0 0 0-1.2-.1 5 5 0 0 0-1.9 3.9 4.9 4.9 0 0 0 8.1 3.7c.4-.3.4-.8.1-1.2a.8.8 0 0 0-1.2 0ZM13.6 8c0 .7-.7 1.4-1.5 1.4s-1.4-.7-1.4-1.5.6-1.5 1.4-1.5c.8 0 1.5.7 1.5 1.5Z" />
         <rect width="100%" height="100%" fill="transparent" />
      </g>
    </svg>

    • 1

相关问题

  • 第二个 Instagram 按钮的 CSS 属性

  • 由于模糊,内容不可见

  • 弹出队列。消息显示不正确

  • 是否可以在 for 循环中插入提示?

  • 如何将 JSON 请求中的信息输出到数据表 Vuetify vue.js?

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    我看不懂措辞

    • 1 个回答
  • Marko Smith

    请求的模块“del”不提供名为“default”的导出

    • 3 个回答
  • Marko Smith

    "!+tab" 在 HTML 的 vs 代码中不起作用

    • 5 个回答
  • Marko Smith

    我正在尝试解决“猜词”的问题。Python

    • 2 个回答
  • Marko Smith

    可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件?

    • 1 个回答
  • Marko Smith

    Python解析野莓

    • 1 个回答
  • Marko Smith

    问题:“警告:检查最新版本的 pip 时出错。”

    • 2 个回答
  • Marko Smith

    帮助编写一个用值填充变量的循环。解决这个问题

    • 2 个回答
  • Marko Smith

    尽管依赖数组为空,但在渲染上调用了 2 次 useEffect

    • 2 个回答
  • Marko Smith

    数据不通过 Telegram.WebApp.sendData 发送

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5