logoChat01.ai

javascript создай функцию возвращяющую svg элемент...

創建於：2026年7月20日

使用 GPT-5.6 Thinking 回答 Chat01

問題

javascript создай функцию возвращяющую svg элемент в виде ладони с поднятым указательным пальцем как иконка руки в браузере

思考

Creating a pointing hand cursor in SVG

To create a SVG of a pointing hand cursor, I'll make sure it's shaped accurately, like a browser's hand cursor. I'll use rounded rectangles and cubic curves for the index finger. I'll keep within the 64x64 viewBox and avoid using copyrighted material like FontAwesome or Material icons.

Thought for 17s

回答

Функция создаёт и возвращает настоящий SVGSVGElement — ладонь с поднятым указательным пальцем в стиле браузерного курсора:

javascript
function createPointingHandIcon({
  size = 32,
  fill = "#ffffff",
  stroke = "#111111",
  strokeWidth = 3,
  ariaLabel = "Указатель"
} = {}) {
  const SVG_NS = "http://www.w3.org/2000/svg";

  const svg = document.createElementNS(SVG_NS, "svg");
  svg.setAttribute("viewBox", "0 0 68 68");
  svg.setAttribute("width", size);
  svg.setAttribute("height", size);
  svg.setAttribute("fill", "none");
  svg.setAttribute("xmlns", SVG_NS);
  svg.setAttribute("role", "img");
  svg.setAttribute("aria-label", ariaLabel);
  svg.setAttribute("focusable", "false");

  const hand = document.createElementNS(SVG_NS, "path");

  hand.setAttribute(
    "d",
    `
      M27 64
      C18 62 12 56 10 48
      L7 37
      C6 33 8 30 11 29
      C14 28 17 30 18 33
      L21 39

      L21 12
      C21 7 24 4 29 4
      C34 4 37 7 37 12
      L37 31

      L37 25
      C37 21 40 18 44 18
      C48 18 51 21 51 25
      L51 32

      L51 28
      C51 24 54 21 58 21
      C62 21 65 24 65 28
      L65 42

      C65 55 57 64 44 64
      Z
    `
  );

  hand.setAttribute("fill", fill);
  hand.setAttribute("stroke", stroke);
  hand.setAttribute("stroke-width", strokeWidth);
  hand.setAttribute("stroke-linecap", "round");
  hand.setAttribute("stroke-linejoin", "round");

  // Линии между согнутыми пальцами
  const fingerLine1 = document.createElementNS(SVG_NS, "path");
  fingerLine1.setAttribute("d", "M37 31 V40");
  fingerLine1.setAttribute("stroke", stroke);
  fingerLine1.setAttribute("stroke-width", strokeWidth);
  fingerLine1.setAttribute("stroke-linecap", "round");

  const fingerLine2 = document.createElementNS(SVG_NS, "path");
  fingerLine2.setAttribute("d", "M51 32 V41");
  fingerLine2.setAttribute("stroke", stroke);
  fingerLine2.setAttribute("stroke-width", strokeWidth);
  fingerLine2.setAttribute("stroke-linecap", "round");

  svg.append(hand, fingerLine1, fingerLine2);

  return svg;
}

Использование:

javascript
const handIcon = createPointingHandIcon({
  size: 48,
  fill: "white",
  stroke: "black",
  strokeWidth: 3
});

document.body.appendChild(handIcon);

Для кнопки:

javascript
const button = document.querySelector("#myButton");

button.prepend(
  createPointingHandIcon({
    size: 24,
    fill: "currentColor",
    stroke: "currentColor",
    strokeWidth: 2
  })
);

При использовании currentColor цвет SVG будет наследоваться из CSS-свойства color родительского элемента.

分享這個問答