Fix gradient
This commit is contained in:
@@ -1,4 +1,3 @@
|
||||
|
||||
import React from 'react';
|
||||
|
||||
interface ConnectionProps {
|
||||
@@ -9,12 +8,16 @@ interface ConnectionProps {
|
||||
}
|
||||
|
||||
export const Connection: React.FC<ConnectionProps> = ({ from, to, fromColor = '#a855f7', toColor = '#a855f7' }) => {
|
||||
// Create gradient ID based on colors to ensure uniqueness
|
||||
const gradientId = `gradient-${fromColor.replace('#', '')}-${toColor.replace('#', '')}`;
|
||||
// Create a safe gradient ID by removing special characters
|
||||
const gradientId = `gradient-${fromColor.replace(/[^a-zA-Z0-9]/g, '')}-${toColor.replace(/[^a-zA-Z0-9]/g, '')}`;
|
||||
|
||||
return (
|
||||
<g>
|
||||
<defs>
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="2" result="blur" />
|
||||
<feComposite in="SourceGraphic" in2="blur" operator="over" />
|
||||
</filter>
|
||||
<linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor={fromColor} stopOpacity="0.7" />
|
||||
<stop offset="100%" stopColor={toColor} stopOpacity="0.7" />
|
||||
|
Reference in New Issue
Block a user