如何使用React展示单个SVG扑克牌组文件内的指定单张卡牌？

你用到的这张整幅扑克牌SVG为固定4列13行的网格布局，无需拆分文件，通过视口裁剪即可实现单张卡牌展示，核心思路是利用SVG的viewBox属性或CSS背景定位，仅展示目标卡牌对应的区域。

方案1：SVG原生viewBox裁剪（推荐，渲染性能更高） #

首先将SVG文件下载到本地项目中，拷贝SVG内部所有图形标签（<path>、<g>等，不需要外层<svg>标签），封装为通用卡牌组件：

import React from 'react';

// 整幅SVG的原始固定尺寸
const FULL_SVG_WIDTH = 1542;
const FULL_SVG_HEIGHT = 2466;
// 计算单张卡牌尺寸：4列13行布局
const CARD_WIDTH = FULL_SVG_WIDTH / 4;
const CARD_HEIGHT = FULL_SVG_HEIGHT / 13;

const PlayingCard = ({ suit = 0, rank = 0 }) => {
  // 计算目标卡牌区域的左上角偏移量
  // suit对应列：0=黑桃、1=红桃、2=方块、3=梅花（可根据实际SVG排列调整）
  // rank对应行：0=A、1=2 ... 12=K（可根据实际SVG排列调整）
  const offsetX = suit * CARD_WIDTH;
  const offsetY = rank * CARD_HEIGHT;
  const viewBox = `${offsetX} ${offsetY} ${CARD_WIDTH} ${CARD_HEIGHT}`;

  return (
    <svg
      viewBox={viewBox}
      width={100} // 可自定义展示宽度
      height={150} // 可自定义展示高度
      preserveAspectRatio="xMidYMid meet"
    >
      {/* 这里粘贴你下载的SVG文件内部所有图形标签 */}
    </svg>
  );
};

export default PlayingCard;

调用时直接传入对应参数即可，比如展示红桃A：

<PlayingCard suit={1} rank={0} />

方案2：CSS背景定位（代码更简洁） #

如果不想把SVG代码嵌入组件，可以用背景图定位实现：

import React from 'react';

const PlayingCard = ({ suit = 0, rank = 0 }) => {
  const offsetX = `${-suit * 25}%`;
  const offsetY = `${-(rank / 12) * 100}%`;
  
  return (
    <div
      style={{
        width: '100px',
        height: '150px',
        background: `url(./本地SVG存放路径)`,
        backgroundSize: '400% 1300%',
        backgroundPosition: `${offsetX} ${offsetY}`,
        backgroundRepeat: 'no-repeat'
      }}
    />
  );
};

export default PlayingCard;

提示：可以先打开本地SVG文件核对行列排列顺序，和默认映射关系不一致的话调整suit、rank的数值对应规则即可。

内容的提问来源于stack exchange，提问作者Lars Juel Jensen