Adobe XD导出SVG文本Hover效果失效，求实现填充色切换

Hey there! I’ve dealt with this exact frustration before—exporting an SVG from Adobe XD, trying to add a hover color change, and having the text refuse to play along. Let’s break down why this happens and how to fix it step by step.

Common Causes of the Hover Failure #

• Adobe XD converts text to paths: By default, XD might export text as <path> elements instead of <text> elements to preserve styling across environments. If you’re targeting <text> in your CSS but the SVG uses paths, your hover won’t trigger.
• Nested/grouped elements: XD often wraps elements in <g> groups or adds extra clip-path/mask layers, which can block hover events or make your CSS selectors miss the target.
• Pointer-events disabled: Occasionally, XD exports elements with pointer-events: none set, which prevents the browser from detecting hover interactions.

Step-by-Step Fixes #

1. Check Your SVG Structure #

First, open the exported SVG file in a text editor and look for your text content:

• If you see <text> tags: Great, you can target these directly.
• If you see <path> tags with long d attributes: XD converted your text to vector paths, so you’ll need to target these paths instead.

2. Clean Up the SVG and Add Classes #

Add a custom class to your text or path elements to make CSS targeting easier. For example:

If using <text> elements:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 150">
  <!-- Keep other SVG elements as needed -->
  <text x="75" y="75" class="svg-hover-text">My Hover Text</text>
</svg>

If using path-converted text:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 150">
  <!-- Keep other SVG elements as needed -->
  <path class="svg-hover-path" d="M75 60 L90 80 ..." fill="#2d2d2d" />
</svg>

3. Write Correct CSS for Hover #

Make sure your CSS targets the class you added, and includes a transition for smooth color change:

For <text> elements:

.svg-hover-text {
  fill: #2d2d2d;
  transition: fill 0.3s ease;
  pointer-events: auto; /* Ensure hover events are detected */
}

.svg-hover-text:hover {
  fill: #ff4500; /* Your desired hover color */
}

For path-converted text:

.svg-hover-path {
  fill: #2d2d2d;
  transition: fill 0.3s ease;
  pointer-events: auto;
}

.svg-hover-path:hover {
  fill: #ff4500;
}

4. Ensure Your SVG is Inlined in HTML #

If you’re using an <img> tag to load your SVG (like <img src="my-svg.svg">), CSS can’t target internal elements. Instead, paste the SVG code directly into your HTML (inline SVG) so your styles can apply.

Pro Tip for Adobe XD Export #

When exporting from XD, check the export options:

• Look for a "Preserve Text" or "Export as Text" setting (depending on your XD version) to keep <text> elements instead of converting them to paths. This makes hover styling simpler and keeps your SVG file size smaller.

内容的提问来源于stack exchange，提问作者user2674150