Question

我想画出反应的箭头。我发现支持maker-end，请参阅：React Docs。它被称为markerEnd而不是marker-end。它期望'url(#markerArrow)'，但它似乎没有起作用。如何用svg制作箭头并做出反应？这是我在组件子类渲染函数中的方法：它绘制线而不是箭头。

render() {
    return(
        <div>
            <svg className='Line' style={{ height:height, width:width, top:top, left:left }}>
                <defs>
                    <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
                            orient="auto">
                        <path d="M2,2 L2,11 L10,6 L2,2" style={{fill: '#000000'}} />
                    </marker>
                </defs>
                <line x1={lx1} y1={ly1} x2={lx2} y2={ly2} markerEnd={ 'url(#markerArrow)' }  style={{ stroke: 'red', strokeWidth: 2 }} />
            </svg>
        </div>
    );
}

红线左下方应该有一个箭头。

Answer 1

将<defs>标记保留在svg元素

中

＆＃13;

<defs>
  <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">
    <path d="M2,2 L2,11 L10,6 L2,2" />
  </marker>
</defs>
<svg width=200 height=200>
  <line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600; marker-end: url(#markerArrow)" />

</svg>



<svg width=200 height=200>
  <defs>
    <marker id="markerArrow1" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">
      <path d="M2,2 L2,11 L10,6 L2,2" />
    </marker>
  </defs>
  <line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600; marker-end: url(#markerArrow1)" />

</svg>

＆＃13;

如果这不起作用，请尝试在反应组件之外移动<defs>并在页面中单独svg。您可以查看实施here

Answer 2

只是帮助正在React中寻找import UIKit @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate, CLLocationManagerDelegate { var window: UIWindow? let locationManager = CLLocationManager() func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool { // Override point for customization after application launch. locationManager.requestAlwaysAuthorization() locationManager.delegate = self locationManager.desiredAccuracy = kCLLocationAccuracyBestForNavigation locationManager.allowsBackgroundLocationUpdates = true locationManager.startUpdatingLocation() locationManager.startMonitoringSignificantLocationChanges() application.registerUserNotificationSettings(UIUserNotificationSettings(types: [.sound, .alert, .badge], categories: nil)) UIApplication.shared.cancelAllLocalNotifications() return true } func alertUserOnLeaving(region:CLRegion){ if UIApplication.shared.applicationState == .active { let alert = UIAlertController(title: "Alert Title", message: "Alert Message", style = .Alert window?.rootViewController?.present(alert, animated: true, completion: nil) } else{ let notification = UILocalNotification() notification.alertBody = "You forgot to checkout" notification.soundName = "Default" UIApplication.shared.presentLocalNotificationNow(notification) } } func alertUserOnArrival(region:CLRegion){ if UIApplication.shared.applicationState == .active { let alert = UIAlertController(title: "Alert Title", message: "Alert Message", style = .Alert window?.rootViewController?.present(alert, animated: true, completion: nil) } else{ let notification = UILocalNotification() notification.alertBody = "Welcome Please checkin" notification.soundName = "Default" UIApplication.shared.presentLocalNotificationNow(notification) } } func setUpGeofenceForJob() { let geofenceRegionCenter = CLLocationCoordinate2DMake(-33.7513580322265, 151.242416381836) let geofenceRegion = CLCircularRegion(center: geofenceRegionCenter, radius: 100, identifier: "GeoFence") geofenceRegion.notifyOnExit = true geofenceRegion.notifyOnEntry = true self.locationManager.startMonitoring(for: geofenceRegion) } func locationManager(_ manager: CLLocationManager, didChangeAuthorization status: CLAuthorizationStatus) { if (status == CLAuthorizationStatus.authorizedAlways) { self.setUpGeofenceForJob() } } func locationManager(_ manager: CLLocationManager, didEnterRegion region: CLRegion) { alertUserOnArrival(region: region) } func locationManager(_ manager: CLLocationManager, didExitRegion region: CLRegion) { alertUserOnLeaving(region: region) }实现的其他人：

您的代码完全正确！

最有可能是另一个问题。 marker-end顶部可能有其他元素。例如，您可以通过为所有元素赋予<line>属性来进行检查。

如何使用markerEnd做出反应来绘制箭头

2 个答案: