X
Tap here to go to the mobile version of the site.

Support Forum

Problem rendering SVG's "path" sub-tag in Firefox browser only

Posted

Hello! I have a problem drawing a line with SVG which is created using the following tags: <svg>

 <path d="..."> 
 </path>

</svg> Maybe there is some special workaround for Firefox but I don't know of any. Here is an example which works fine in google Chrome and IE11 but not in Firefox (I checked from two disparate computers, result was the same). https://just-Chart--raydenfilipp.repl.co

Hello! I have a problem drawing a line with SVG which is created using the following tags: <svg> <path d="..."> <!-- d attribute is not shown here since it's huge --> </path> </svg> Maybe there is some special workaround for Firefox but I don't know of any. Here is an example which works fine in google Chrome and IE11 but not in Firefox (I checked from two disparate computers, result was the same). https://just-Chart--raydenfilipp.repl.co

Chosen solution

There is a special workaround for Firefox: Follow the Holly Specification.

You shall not be using commas in your d attribute of line path, use spaces instead.

Read this answer in context 2

Additional System Details

Installed Plug-ins

  • Shockwave Flash 32.0 r0

Application

  • Firefox 60.5.0esr
  • User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:60.0) Gecko/20100101 Firefox/60.0
  • Support URL: https://support.mozilla.org/1/firefox/60.5.0/WINNT/en-US/

Extensions

  • Cisco WebEx Extension 1.0.12 (ciscowebexstart1@cisco.com)
  • McAfee Endpoint Security Web Control 10.6.0.311 ({cb40da56-497a-4add-955d-3377cae4c33b})

Javascript

  • incrementalGCEnabled: True

Graphics

  • adapterDescription: NVIDIA Quadro K2200
  • adapterDescription2:
  • adapterDeviceID: 0x13ba
  • adapterDeviceID2:
  • adapterDrivers: nvd3dumx,nvwgf2umx,nvwgf2umx,nvwgf2umx nvd3dum,nvwgf2um,nvwgf2um,nvwgf2um
  • adapterDrivers2:
  • adapterRAM: 4096
  • adapterRAM2:
  • adapterSubsysID: 109710de
  • adapterSubsysID2:
  • adapterVendorID: 0x10de
  • adapterVendorID2:
  • crashGuards: []
  • direct2DEnabled: True
  • directWriteEnabled: True
  • directWriteVersion: 10.0.16299.755
  • driverDate: 3-18-2016
  • driverDate2:
  • driverVersion: 10.18.13.6213
  • driverVersion2:
  • featureLog: {u'fallbacks': [], u'features': [{u'status': u'available', u'description': u'Compositing', u'log': [{u'status': u'available', u'type': u'default'}], u'name': u'HW_COMPOSITING'}, {u'status': u'available', u'description': u'Direct3D11 Compositing', u'log': [{u'status': u'available', u'type': u'default'}], u'name': u'D3D11_COMPOSITING'}, {u'status': u'available', u'description': u'Direct2D', u'log': [{u'status': u'available', u'type': u'default'}], u'name': u'DIRECT2D'}, {u'status': u'available', u'description': u'Direct3D11 hardware ANGLE', u'log': [{u'status': u'available', u'type': u'default'}], u'name': u'D3D11_HW_ANGLE'}, {u'status': u'available', u'description': u'GPU Process', u'log': [{u'status': u'available', u'type': u'default'}], u'name': u'GPU_PROCESS'}, {u'status': u'unavailable', u'description': u'WebRender', u'log': [{u'status': u'opt-in', u'message': u'WebRender is an opt-in feature', u'type': u'default'}, {u'status': u'unavailable', u'message': u"Build doesn't include WebRender", u'type': u'runtime'}], u'name': u'WEBRENDER'}, {u'status': u'available', u'description': u'Off Main Thread Painting', u'log': [{u'status': u'available', u'type': u'default'}], u'name': u'OMTP'}, {u'status': u'available', u'description': u'Advanced Layers', u'log': [{u'status': u'available', u'type': u'default'}], u'name': u'ADVANCED_LAYERS'}]}
  • info: {u'AzureContentBackend (UI Process)': u'skia', u'AzureCanvasBackend (UI Process)': u'skia', u'ApzWheelInput': 1, u'ApzDragInput': 1, u'ApzKeyboardInput': 1, u'AzureFallbackCanvasBackend (UI Process)': u'cairo', u'ApzAutoscrollInput': 1, u'AzureCanvasAccelerated': 0, u'AzureCanvasBackend': u'Direct2D 1.1', u'AzureContentBackend': u'Direct2D 1.1'}
  • isGPU2Active: False
  • numAcceleratedWindows: 1
  • numTotalWindows: 1
  • offMainThreadPaintEnabled: True
  • offMainThreadPaintWorkerCount: 0
  • usesTiling: False
  • webgl1DriverExtensions: GL_ANGLE_client_arrays GL_ANGLE_depth_texture GL_ANGLE_framebuffer_blit GL_ANGLE_framebuffer_multisample GL_ANGLE_instanced_arrays GL_ANGLE_lossy_etc_decode GL_ANGLE_pack_reverse_row_order GL_ANGLE_program_cache_control GL_ANGLE_request_extension GL_ANGLE_robust_client_memory GL_ANGLE_texture_compression_dxt3 GL_ANGLE_texture_compression_dxt5 GL_ANGLE_texture_usage GL_ANGLE_translated_shader_source GL_CHROMIUM_bind_generates_resource GL_CHROMIUM_bind_uniform_location GL_CHROMIUM_color_buffer_float_rgb GL_CHROMIUM_color_buffer_float_rgba GL_CHROMIUM_copy_compressed_texture GL_CHROMIUM_copy_texture GL_CHROMIUM_sync_query GL_EXT_blend_minmax GL_EXT_color_buffer_half_float GL_EXT_debug_marker GL_EXT_discard_framebuffer GL_EXT_disjoint_timer_query GL_EXT_draw_buffers GL_EXT_frag_depth GL_EXT_map_buffer_range GL_EXT_occlusion_query_boolean GL_EXT_read_format_bgra GL_EXT_robustness GL_EXT_sRGB GL_EXT_shader_texture_lod GL_EXT_texture_compression_dxt1 GL_EXT_texture_compression_s3tc_srgb GL_EXT_texture_filter_anisotropic GL_EXT_texture_format_BGRA8888 GL_EXT_texture_rg GL_EXT_texture_storage GL_EXT_unpack_subimage GL_KHR_debug GL_NV_EGL_stream_consumer_external GL_NV_fence GL_NV_pack_subimage GL_NV_pixel_buffer_object GL_OES_EGL_image GL_OES_EGL_image_external GL_OES_compressed_ETC1_RGB8_texture GL_OES_depth32 GL_OES_element_index_uint GL_OES_get_program_binary GL_OES_mapbuffer GL_OES_packed_depth_stencil GL_OES_rgb8_rgba8 GL_OES_standard_derivatives GL_OES_surfaceless_context GL_OES_texture_float GL_OES_texture_float_linear GL_OES_texture_half_float GL_OES_texture_half_float_linear GL_OES_texture_npot GL_OES_vertex_array_object
  • webgl1Extensions: ANGLE_instanced_arrays EXT_blend_minmax EXT_color_buffer_half_float EXT_frag_depth EXT_sRGB EXT_shader_texture_lod EXT_texture_filter_anisotropic EXT_disjoint_timer_query OES_element_index_uint OES_standard_derivatives OES_texture_float OES_texture_float_linear OES_texture_half_float OES_texture_half_float_linear OES_vertex_array_object WEBGL_color_buffer_float WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_depth_texture WEBGL_draw_buffers WEBGL_lose_context
  • webgl1Renderer: Google Inc. -- ANGLE (NVIDIA Quadro K2200 Direct3D11 vs_5_0 ps_5_0)
  • webgl1Version: OpenGL ES 2.0 (ANGLE 2.1.0.f474fbb607e0)
  • webgl1WSIInfo: EGL_VENDOR: Google Inc. (adapter LUID: 000000000000a6bd) EGL_VERSION: 1.4 (ANGLE 2.1.0.f474fbb607e0) EGL_EXTENSIONS: EGL_EXT_create_context_robustness EGL_ANGLE_d3d_share_handle_client_buffer EGL_ANGLE_d3d_texture_client_buffer EGL_ANGLE_surface_d3d_texture_2d_share_handle EGL_ANGLE_query_surface_pointer EGL_ANGLE_window_fixed_size EGL_ANGLE_keyed_mutex EGL_ANGLE_surface_orientation EGL_ANGLE_direct_composition EGL_NV_post_sub_buffer EGL_KHR_create_context EGL_EXT_device_query EGL_KHR_image EGL_KHR_image_base EGL_KHR_gl_texture_2D_image EGL_KHR_gl_texture_cubemap_image EGL_KHR_gl_renderbuffer_image EGL_KHR_get_all_proc_addresses EGL_KHR_stream EGL_KHR_stream_consumer_gltexture EGL_NV_stream_consumer_gltexture_yuv EGL_ANGLE_flexible_surface_compatibility EGL_ANGLE_stream_producer_d3d_texture EGL_ANGLE_create_context_webgl_compatibility EGL_CHROMIUM_create_context_bind_generates_resource EGL_CHROMIUM_sync_control EGL_EXT_pixel_format_float EGL_KHR_surfaceless_context EGL_ANGLE_display_texture_share_group EGL_ANGLE_create_context_client_arrays EGL_ANGLE_program_cache_control EGL_ANGLE_robust_resource_initialization EGL_EXTENSIONS(nullptr): EGL_EXT_client_extensions EGL_EXT_platform_base EGL_EXT_platform_device EGL_ANGLE_platform_angle EGL_ANGLE_platform_angle_d3d EGL_ANGLE_device_creation EGL_ANGLE_device_creation_d3d11 EGL_ANGLE_experimental_present_path EGL_KHR_client_get_all_proc_addresses
  • webgl2DriverExtensions: GL_ANGLE_client_arrays GL_ANGLE_depth_texture GL_ANGLE_framebuffer_blit GL_ANGLE_framebuffer_multisample GL_ANGLE_instanced_arrays GL_ANGLE_lossy_etc_decode GL_ANGLE_multiview GL_ANGLE_pack_reverse_row_order GL_ANGLE_program_cache_control GL_ANGLE_request_extension GL_ANGLE_robust_client_memory GL_ANGLE_texture_compression_dxt3 GL_ANGLE_texture_compression_dxt5 GL_ANGLE_texture_usage GL_ANGLE_translated_shader_source GL_CHROMIUM_bind_generates_resource GL_CHROMIUM_bind_uniform_location GL_CHROMIUM_color_buffer_float_rgb GL_CHROMIUM_color_buffer_float_rgba GL_CHROMIUM_copy_compressed_texture GL_CHROMIUM_copy_texture GL_CHROMIUM_sync_query GL_EXT_blend_minmax GL_EXT_color_buffer_float GL_EXT_color_buffer_half_float GL_EXT_debug_marker GL_EXT_discard_framebuffer GL_EXT_disjoint_timer_query GL_EXT_draw_buffers GL_EXT_frag_depth GL_EXT_map_buffer_range GL_EXT_occlusion_query_boolean GL_EXT_read_format_bgra GL_EXT_robustness GL_EXT_sRGB GL_EXT_shader_texture_lod GL_EXT_texture_compression_dxt1 GL_EXT_texture_compression_s3tc_srgb GL_EXT_texture_filter_anisotropic GL_EXT_texture_format_BGRA8888 GL_EXT_texture_norm16 GL_EXT_texture_rg GL_EXT_texture_storage GL_EXT_unpack_subimage GL_KHR_debug GL_NV_EGL_stream_consumer_external GL_NV_fence GL_NV_pack_subimage GL_NV_pixel_buffer_object GL_OES_EGL_image GL_OES_EGL_image_external GL_OES_EGL_image_external_essl3 GL_OES_compressed_ETC1_RGB8_texture GL_OES_depth32 GL_OES_element_index_uint GL_OES_get_program_binary GL_OES_mapbuffer GL_OES_packed_depth_stencil GL_OES_rgb8_rgba8 GL_OES_standard_derivatives GL_OES_surfaceless_context GL_OES_texture_float GL_OES_texture_float_linear GL_OES_texture_half_float GL_OES_texture_half_float_linear GL_OES_texture_npot GL_OES_vertex_array_object
  • webgl2Extensions: EXT_color_buffer_float EXT_texture_filter_anisotropic EXT_disjoint_timer_query OES_texture_float_linear WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_lose_context
  • webgl2Renderer: Google Inc. -- ANGLE (NVIDIA Quadro K2200 Direct3D11 vs_5_0 ps_5_0)
  • webgl2Version: OpenGL ES 3.0 (ANGLE 2.1.0.f474fbb607e0)
  • webgl2WSIInfo: EGL_VENDOR: Google Inc. (adapter LUID: 000000000000a6bd) EGL_VERSION: 1.4 (ANGLE 2.1.0.f474fbb607e0) EGL_EXTENSIONS: EGL_EXT_create_context_robustness EGL_ANGLE_d3d_share_handle_client_buffer EGL_ANGLE_d3d_texture_client_buffer EGL_ANGLE_surface_d3d_texture_2d_share_handle EGL_ANGLE_query_surface_pointer EGL_ANGLE_window_fixed_size EGL_ANGLE_keyed_mutex EGL_ANGLE_surface_orientation EGL_ANGLE_direct_composition EGL_NV_post_sub_buffer EGL_KHR_create_context EGL_EXT_device_query EGL_KHR_image EGL_KHR_image_base EGL_KHR_gl_texture_2D_image EGL_KHR_gl_texture_cubemap_image EGL_KHR_gl_renderbuffer_image EGL_KHR_get_all_proc_addresses EGL_KHR_stream EGL_KHR_stream_consumer_gltexture EGL_NV_stream_consumer_gltexture_yuv EGL_ANGLE_flexible_surface_compatibility EGL_ANGLE_stream_producer_d3d_texture EGL_ANGLE_create_context_webgl_compatibility EGL_CHROMIUM_create_context_bind_generates_resource EGL_CHROMIUM_sync_control EGL_EXT_pixel_format_float EGL_KHR_surfaceless_context EGL_ANGLE_display_texture_share_group EGL_ANGLE_create_context_client_arrays EGL_ANGLE_program_cache_control EGL_ANGLE_robust_resource_initialization EGL_EXTENSIONS(nullptr): EGL_EXT_client_extensions EGL_EXT_platform_base EGL_EXT_platform_device EGL_ANGLE_platform_angle EGL_ANGLE_platform_angle_d3d EGL_ANGLE_device_creation EGL_ANGLE_device_creation_d3d11 EGL_ANGLE_experimental_present_path EGL_KHR_client_get_all_proc_addresses
  • windowLayerManagerRemote: True
  • windowLayerManagerType: Direct3D 11
  • windowUsingAdvancedLayers: True

Modified Preferences

Misc

  • User JS: No
  • Accessibility: No
TyDraniu
  • Top 25 Contributor
315 solutions 1776 answers

Chosen Solution

There is a special workaround for Firefox: Follow the Holly Specification.

You shall not be using commas in your d attribute of line path, use spaces instead.

There is a special workaround for Firefox: Follow the Holly Specification. You shall not be using commas in your '''d''' attribute of line path, use spaces instead.

Question owner

TyDraniu said

There is a special workaround for Firefox: Follow the Holly Specification. You shall not be using commas in your d attribute of line path, use spaces instead.

Great-great thanks! I exhausted all efforts trying to find an error. Shouldn't been using 3rd party code without a grain of salt

''TyDraniu [[#answer-1208046|said]]'' <blockquote> There is a special workaround for Firefox: Follow the Holly Specification. You shall not be using commas in your '''d''' attribute of line path, use spaces instead. </blockquote> Great-great thanks! I exhausted all efforts trying to find an error. Shouldn't been using 3rd party code without a grain of salt
AS@FirefoxHelp 0 solutions 3 answers

Apparently, you can use commas between the x and y values but not between the points in the L commands. At least that seemed to be the case for me. Removing the ","s between points made the <path> show, but using them between x and y did not seem to cause a problem.

Apparently, you can use commas between the x and y values but not between the points in the '''L '''commands. At least that seemed to be the case for me. Removing the ","s between points made the '''<path>''' show, but using them between x and y did not seem to cause a problem.

Modified by AS@FirefoxHelp

AS@FirefoxHelp 0 solutions 3 answers

Helpful Reply

Just tried an example <path> with the Q command using commas between the points and it rendered.

Just tried an example '''<path>''' with the '''Q '''command using commas between the points and it rendered.